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>
效果图：
