思路：分两步，
1.先把各个框框画好
2.用JS实现效果。
---用到两个事件：onmouseover,onmouseout
方法一：
CSS：
@charset "utf-8";
/* CSS Document */
*
{
margin:0px;
padding:0px;
}
#a{
border:1px solid #00F;
width:120px;
height:60px;
left:300px;
top:200px;
background-color:#F00;
position:absolute;
overflow:hidden;}
.aa{
border:1px solid #00F;
background-color:#FC0;
width:120px;
height:180px;
position:absolute;
left:0px;
top:60px;}
.aaa{
border:1px solid #00F;
background-color:#FC0;
width:120px;
height:180px;
position:absolute;
left:120px;
top:0px;}
#b1{
border:#00F solid 1px;
background-color:#0F0;
width:120px;
height:60px;
position:absolute;
overflow:hidden;}
#b2{border:#00F solid 1px;
background-color:#00F;
width:120px;
height:60px;
left:0px;
top:60px;
position:absolute;
overflow:hidden;
}
#b3
{
border:#00F solid 1px;
background-color:#F0F;
width:120px;
height:60px;
left:0px;
top:120px;
position:absolute;
overflow:hidden;}
.d{
border:1px solid #00F;
width:120px;
height:60px;
}
#da{
left:420px;
top:200px;
background-color:#F00;
position:absolute;
overflow:hidden;
}
#dd{
border:1px solid #00F;
width: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;
width: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;
width:120px;
height:60px;
background-color:#F00;
left:200px;
top:200px;
position:absolute;
cursor:pointer;
overflow:hidden;}
.aa
{
border:#F00 solid 1px;
cursor:pointer;
width:120px;
height:60px;
background-color:#F00;
left:200px;
top:200px;
position:absolute;
overflow:visible;}
#aaa{
border:1px solid #00FF00;
background-color:#FF0;
width:120px;
height:180px;
left:0px;
top:60px;
position:absolute;}
.b{
border:1px solid #00F;
background-color:#F0F;
width:120px;
height:60px;
position:absolute;
overflow:hidden;}
.ba{
border:1px solid #00F;
background-color:#F0F;
width:120px;
height:60px;
position:absolute;
overflow:visible;}
.bb{
border:1px solid #00F;
background-color:#00F;
width:120px;
height:60px;
top:60px;
position:absolute;
overflow:hidden;
}
.baa{
border:1px solid #00F;
background-color:#00F;
width:120px;
height:60px;
top:60px;
position:absolute;
overflow:visible;
}
.bbb{
border:1px solid #00F;
background-color:#0FF;
width:120px;
height:60px;
top:120px;
position:absolute;
overflow:hidden;
}
.baaa{
border:1px solid #00F;
background-color:#0FF;
width:120px;
height:60px;
top:120px;
position:absolute;
overflow:visible;
}
.ccc
{ border:1px solid #00FF00;
background-color:#FF0;
width:120px;
height:180px;
left:120px;
top:0px;
position:absolute;
}
</style>
</head>
<body>
<div class="a" onmouseover="this.className='aa'" onmouseout="this.className='a'">
<div id="aaa">
<div class="b" onmouseover="this.className='ba'" onmouseout="this.className='b'"><div class="ccc"></div></div>
<div class="bb" onmouseover="this.className='baa'" onmouseout="this.className='bb'" ><div class="ccc"></div></div>
<div class="bbb"onmouseover="this.className='baaa'" onmouseout="this.className='bbb'"><div class="ccc"></div></div>
</div>
</div>
</body>
</html>
