jQuery鼠标划过浮动层
慕健
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style>
body{font:12px/1.5 Tahoma;}
body,ul,li,p,dl,dt,dd{margin:0;padding:0;}
ul li{list-style:none;}
img{border:none;vertical-align:middle;}
a{text-decoration:none;color:#333;}
.content{width:200px;padding:20px;position:relative;top:60px;left:80px}
.content li{line-height:32px;border-bottom:1px dashed #ddd;position:relative;}
.content a{width:180px;display:inline-block;}
.preview{width:312px;height:106px;background:url(images/tipbox.png) no-repeat;padding:40px 0 0 30px;position:absolute;z-index:99;/*top:20px;left:60px;*/ background:#0000FF;}
</style>
</head>
<body>
<div class="content">
<ul>
<li>
<a href="#@" class="ashow">文字1</a>
</li>
<li>
<a href="#@" class="ashow">文字2</a>
</li>
<li>
<a href="#@" class="ashow">文字3</a>
</li>
<li>
<a href="#@" class="ashow">文字4</a>
</li>
</ul>
</div>
<script>
$(document).ready(function(){
var x = 30;
var y = 10;
$("a.ashow").hover(function(e){
$("body").append("<div class='preview'>我是提示文字.</div>");
$(".preview").css({"top":(e.pageY + y) + "px","left":(e.pageX - x) + "px"}).fadeIn("slow");
}),
function(){
$(".preview").fadeOut("fast");
}
$("a.ashow").mousemove(function(e){
$(".preview").css({"top":(e.pageY + y) + "px","left":(e.pageX - x) + "px"});
})
})
.mouseout(function(){
$(".preview").hide().remove()
});
</script>
</body>
</html>
类似资料：