<!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 { height:40px; width:90px; top:80px; left:200px; background-color:#339; position:absolute; overflow:hidden; text-align:center; line-height:40px; } #bb { height:120px; width:90px; top:40px; left:0px; background-color:#3FC; position:absolute; } table { height:120px; width:90px; border:0px; text-align:center; } #cc { height:40px; width:90px; position:absolute; left:0px; top:0px; overflow:hidden; background-color:#6F6; } #dd { height:40px; width:90px; background-color:#666; position:absolute; left:90px; top:0px; } #ee { height:40px; width:90px; position:absolute; left:0px; top:40px; overflow:hidden; background-color:#6F9; } #ff { height:40px; width:90px; background-color:#666; position:absolute; left:90px; top:0px; } #gg { height:40px; width:90px; position:absolute; left:0px; top:80px; overflow:hidden; background-color:#F99; } #hh { height:40px; width:90px; background-color:#666; position:absolute; left:90px; top:0px; } </style> </head> <body> <div id="aa" onmouseover="over)" onmouseout="out)">新闻动态 <div id="bb"> <table cellpadding="0" cellspacing="0"> <tr> <td height="40px" width="90px"> <div id="cc" onmouseover="over1)" onmouseout="out1)">场景 <div id="dd">讲座</div></div></td></tr> <tr><td height="40px" width="90px"><div id="ee" onmouseover="over2)" onmouseout="out2)">活动<div id="ff">比赛</div></div></td></tr> <tr><td height="40px" width="90px"><div id="gg" onmouseover="over3)" onmouseout="out3)">杂谈<div id="hh">项目</div></div></td></tr> </table> <script> function over) { var a = document.getElementById"aa"); a.setAttribute"style","overflow:visible;background-color:yellow");} function out) { var a = document.getElementById"aa"); a.setAttribute"style","overflow:hidden"); } function over1) { var a = document.getElementById"cc"); a.setAttribute"style","overflow:visible;background-color:green");} function out1) { var a = document.getElementById"cc"); a.setAttribute"style","overflow:hidden"); } function over2) { var a = document.getElementById"ee"); a.setAttribute"style","overflow:visible;background-color:yellow");} function out2) { var a = document.getElementById"ee"); a.setAttribute"style","overflow:hidden"); } function over3) { var a = document.getElementById"gg"); a.setAttribute"style","overflow:visible;background-color:red");} function out3) { var a = document.getElementById"gg"); a.setAttribute"style","overflow:hidden"); } </script> </div></div> </body> </html>
显示效果：
鼠标没有指向时：
鼠标指向“新闻动态”时：
鼠标指向“场景”时：
鼠标指向“活动”时：
鼠标指向“杂谈”时：
