JavaScrip——练习(做悬浮框进一步:悬浮窗后缀悬浮窗【感觉这种方法比较麻烦】)
<!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>
结果:
默认时:
鼠标在新闻动态上面时:
鼠标在体育上面时:
鼠标在娱乐上面时:
鼠标在国际新闻上面时