案例-------网页导航

思路：分两步，

1.先把各个框框画好

2.用JS实现效果。

---用到两个事件：onmouseover,onmouseout

方法一：

CSS：

@charset "utf-8";
/* CSS Document */
*
    {
     margin:0px;
     padding:0px;
    }
#a{
    border:1px solid #00F;
    120px;
    height:60px;
    left:300px;
    top:200px;
    background-color:#F00;
    position:absolute;
    overflow:hidden;}
.aa{
    border:1px solid #00F;
    background-color:#FC0;
    120px;
    height:180px;
    position:absolute;
    left:0px;
    top:60px;}
.aaa{
    border:1px solid #00F;
    background-color:#FC0;
    120px;
    height:180px;
    position:absolute;
    left:120px;
    top:0px;}
#b1{
    border:#00F solid 1px;
    background-color:#0F0;
    120px;
    height:60px;
    position:absolute;
    overflow:hidden;}
#b2{border:#00F solid 1px;
    background-color:#00F;
    120px;
    height:60px;
    left:0px;
    top:60px;
    position:absolute;
    overflow:hidden;
    }
#b3
    {
        border:#00F solid 1px;
        background-color:#F0F;
        120px;
        height:60px;
        left:0px;
        top:120px;
        position:absolute;
        overflow:hidden;}
        
        
.d{
    border:1px solid #00F;
    120px;
    height:60px;
    }
#da{
    left:420px;
    top:200px;
    background-color:#F00;
    position:absolute;
    overflow:hidden;
    }
#dd{
    border:1px solid #00F;
    120px;
    height:180px;
    left:0px;
    top:60px;
    background-color:yellow;
    position:absolute;
    }
#ddd
    {
     background-color:#0F0;
     position:absolute;
     overflow:hidden;    
    }
#e{     background-color:#00F;
     top:60px;
     position:absolute;
     overflow:hidden;
    }
#ee{
     background-color:#0FF;
     top:120px;
     position:absolute;
     overflow:hidden;}
        
.f{
    border:#00F solid 1px;
    background-color:#F0F;
    120px;
    height:180px;
    top:0px;
    left:120px;
    position:absolute;
    }

html-body部分

<body>
<div id="a" onmouseover="over1()" onmouseout="out1()"><div class="aa">
<div id="b1" onmousemove="over2()" onmouseout="out2()"><div class="aaa"></div></div>
<div id="b2" onmousemove="over3()" onmouseout="out3()"><div class="aaa"></div></div>
<div id="b3" onmousemove="over4()" onmouseout="out4()"><div class="aaa"></div></div>
</div>
</div>

<div class="d" id="da" onmouseover="over11()" onmouseout="out11()"><div id="dd">
<div class="d" id="ddd" onmousemove="over12()" onmouseout="out12()"><div class="f"></div></div>
<div class="d" id="e" onmousemove="over13()" onmouseout="out13()"><div class="f"></div></div>
<div class="d" id="ee" onmousemove="over14()" onmouseout="out14()"><div class="f"></div></div>
</div>
</div>
</body>
</html>
<script language="javascript">
function over1()
{
    var a=window.document.getElementById("a");
    a.setAttribute("style","overflow:visible");
    }
function out1()
{
    var a=window.document.getElementById("a");
    a.setAttribute("style","overflow:hidden");
    }
function over2()
{
    var a=window.document.getElementById("b1");
    a.setAttribute("style","overflow:visible")
    }
function out2()
{
    var a=window.document.getElementById("b1");
    a.setAttribute("style","overflow:hidden");
    }
function over3()
{
    var a=window.document.getElementById("b2");
    a.setAttribute("style","overflow:visible")
    }
function out3()
{
    var a=window.document.getElementById("b2");
    a.setAttribute("style","overflow:hidden");
    }
function over4()
{
    var a=window.document.getElementById("b3");
    a.setAttribute("style","overflow:visible")
    }
function out4()
{
    var a=window.document.getElementById("b3");
    a.setAttribute("style","overflow:hidden");
    }
function over11()
{
    var a=document.getElementById("da");
    a.setAttribute("style","overflow:visible");
    }
function out11()
{    var a=window.document.getElementById("da")
    a.setAttribute("style","overflow:hidden");
    }
function over12()
{
    var a=document.getElementById("ddd");
    a.setAttribute("style","overflow:visible");
    }
function out12()
{    var a=window.document.getElementById("ddd")
    a.setAttribute("style","overflow:hidden");
    }
function over13()
{
    var a=document.getElementById("e");
    a.setAttribute("style","overflow:visible");
    }
function out13()
{    var a=window.document.getElementById("e")
    a.setAttribute("style","overflow:hidden");
    }
function over14()
{
    var a=document.getElementById("ee");
    a.setAttribute("style","overflow:visible");
    }
function out14()
{    var a=window.document.getElementById("ee")
    a.setAttribute("style","overflow:hidden");
    }
</script>

方法2：

重点是onmouseover="this.className='aa'" onmouseout="this.className='a'"

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
margin:0px;
padding:0px;}
.a{ border:#F00 solid 1px;
120px;
height:60px;
background-color:#F00;
left:200px;
top:200px;
position:absolute;
cursor:pointer;
overflow:hidden;}
.aa
{
border:#F00 solid 1px;
cursor:pointer;
120px;
height:60px;
background-color:#F00;
left:200px;
top:200px;
position:absolute;
overflow:visible;}
#aaa{
border:1px solid #00FF00;
background-color:#FF0;
120px;
height:180px;
left:0px;
top:60px;
position:absolute;}
.b{
border:1px solid #00F;
background-color:#F0F;
120px;
height:60px;
position:absolute;
overflow:hidden;}
.ba{
border:1px solid #00F;
background-color:#F0F;
120px;
height:60px;
position:absolute;
overflow:visible;}

.bb{
border:1px solid #00F;
background-color:#00F;
120px;
height:60px;
top:60px;
position:absolute;
overflow:hidden;
}
.baa{
border:1px solid #00F;
background-color:#00F;
120px;
height:60px;
top:60px;
position:absolute;
overflow:visible;
}

.bbb{
border:1px solid #00F;
background-color:#0FF;
120px;
height:60px;
top:120px;
position:absolute;
overflow:hidden;
}
.baaa{
border:1px solid #00F;
background-color:#0FF;
120px;
height:60px;
top:120px;
position:absolute;
overflow:visible;
}
.ccc
{ border:1px solid #00FF00;
background-color:#FF0;
120px;
height:180px;
left:120px;
top:0px;
position:absolute;
}
</style>
</head>

相关阅读:
带参的方法
 类的无参方法
 类和对象
 关于线程间的通信的几个解决事例
 一个简单的邮件发送
 关于process
关于java的static语句块
 关于struts2拦截器获取页面参数
 hexo github pages 首页不展示，出现代码怎么办
 使用Hexo搭建个人博客（三）
原文地址：https://www.cnblogs.com/jinshui/p/5470884.html