<!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>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#aa
{
background-color:#FF0; height: 40px;
width: 100px;
top: 60px;
left: 100px;
position: absolute;
overflow: hidden;
text-align: center;
line-height:40px;
}
#bb{ height:120px;
width:100px;
top:40px;
left:0px;
position:absolute; }
table{ height:120px;
width:100px;
text-align:center;
vertical-align:middle;
}
#tiyu
{
height:40px;
width:100px;
position:absolute;
overflow:hidden;
left:0px;
top:0px;
}
#zuqiu
{
height:40px;
width:100px;
position:absolute;
left:100px;
top:0px;
background-color:#C63;
}
#yule
{
height:40px;
width:100px;
position:absolute;
overflow:hidden;
left:0px;
top:40px;
}
#bagua
{
height:40px;
width:100px;
position:absolute;
left:100px;
top:0px;
background-color:#C63;
}
#guoji
{
height:40px;
width:100px;
position:absolute;
overflow:hidden;
left:0px;
top:80px;
}
#junshi
{
height:40px;
width:100px;
position:absolute;
left:100px;
top:0px;
background-color:#C63;
}
</style>
</head> <body>
<div id="aa" onmousemove="over()" onmouseout="out()">新闻动态
<div id="bb">
<table cellpadding="0" cellspacing="0"> <tr bgcolor="#0000FF"> <td height="40" width="100"><div id="tiyu" onmouseover="over1()" onmouseout="out1()">体育<div id="zuqiu">足球</div></div></td> </tr> <tr bgcolor="#FFFF00">
<td height="40" width="100"><div id="yule" onmousemove="over2()" onmouseout="out2()">娱乐<div id="bagua">八卦</div></div></td> </tr> <tr bgcolor="#00FFFF">
<td height="40" width="100"><div id="guoji" onmouseover="over3()" onmouseout="out3()">国际新闻<div id="junshi">军事</div></div></td>
</tr>
</table> </div></div> </body>
</html>
<script>
function over()
{
var a=document.getElementById("aa")
a.setAttribute("style","overflow:visible;background-color:red");
}
function out()
{
var a=document.getElementById("aa")
a.setAttribute("style","overflow:hidden:background-color:green"
); }
function over1()
{
var a=document.getElementById("tiyu")
a.setAttribute("style","overflow:visible;background-color:red");
}
function out1()
{
var a=document.getElementById("tiyu")
a.setAttribute("style","overflow:hidden:background-color:green"
); }
function over2()
{
var a=document.getElementById("yule")
a.setAttribute("style","overflow:visible;background-color:red");
}
function out2()
{
var a=document.getElementById("yule")
a.setAttribute("style","overflow:hidden:background-color:green"
); }
function over3()
{
var a=document.getElementById("guoji")
a.setAttribute("style","overflow:visible;background-color:red");
}
function out3()
{
var a=document.getElementById("guoji")
a.setAttribute("style","overflow:hidden:background-color:green"
); } </script>
结果：
默认时：
鼠标在新闻动态上面时：
鼠标在体育上面时：
鼠标在娱乐上面时：
鼠标在国际新闻上面时