<html> <head> <title>TEST</title> <meta charset="utf-8" /> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> </head> <style> #switch{width:100px;height:36px;line-height:36px;border:1px solid #e6e6e6;position:relative;} #layer{width:200px;height:200px;background-color:red;opacity:0;margin-top: 0;position:absolute;left:0;top:0;} </style> <body> <div id="switch"> hover me <div id="layer">新的一层</div> </div> <script type="text/javascript"> $("#switch").mouseenter(function(){ $("#layer").stop().animate( {opacity:"1", top:"36px"},"slow").show(); }); $("#switch").mouseleave(function(){ $("#layer").stop().animate( {opacity:"0", top:"0px"},"slow"); }); </script> </body> </html>
页面结构最好是包含关系，即滑过父类（#switch），显示子类浮层（#layer），且无缝连接，否则会鼠标滑过的时候一闪一闪的。
写了一个css最简单的，":hover"父级实现的显示子类。发现在页面最上面的时候，偶尔子类会显示不出来（bug是chrome浏览器复现的，且另开窗口或者打开控制台，bug都会消失），解决的办法是鼠标滑出的时候加setTimeout()，以上的时候clearTimeout()。