CSS样式表：
@charset "utf-8"; /* CSS Document */ .a { width:80px; height:40px; top:200px; left:200px; background-color:#F00; position:absolute; overflow:hidden; } .b { width:80px; height:120px; top:40px; left:0px; position:absolute; } .x { width:80px; height:40px; top:0px; left:0px; background-color:#0F0; overflow:hidden; position:absolute; } .x1 { width:100px; height:160px; top:0px; left:80px; background-color:#0F0; position:absolute; } .y { width:80px; height:40px; top:40px; left:0px; background-color:#00F; overflow:hidden; position:absolute; } .y1 { width:100px; height:160px; top:0px; left:80px; background-color:#00F; position:absolute; } .z { width:80px; height:40px; top:80px; left:0px; background-color:#F0F; overflow:hidden; position:absolute; } .z1 { width:100px; height:160px; top:0px; left:80px; background-color:#F0F; position:absolute; }
源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link href="Untitled-3的样式表.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="a" id="f1" onmouseover="h1()" onmouseout="h2()"> <div class="b"> <div class="x" id="f2" onmouseover="h3()" onmouseout="h4()"> <div class="x1"></div> </div> <div class="y" id="f3" onmouseover="h5()" onmouseout="h6()"> <div class="y1"></div> </div> <div class="z" id="f4" onmouseover="h7()" onmouseout="h8()"> <div class="z1"></div> </div> </div> </div> </body> </html> <script> function h1() { document.getElementById("f1").style.overflow="visible"; } function h2() { document.getElementById("f1").style.overflow="hidden"; } function h3() { document.getElementById("f2").style.overflow="visible"; } function h4() { document.getElementById("f2").style.overflow="hidden"; } function h5() { document.getElementById("f3").style.overflow="visible"; } function h6() { document.getElementById("f3").style.overflow="hidden"; } function h7() { document.getElementById("f4").style.overflow="visible"; } function h8() { document.getElementById("f4").style.overflow="hidden"; } </script>
效果图：
