<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），且无缝连接，否则会鼠标滑过的时候一闪一闪的。
时间： 2024-12-20 09:49:14