Jquery创建层显示标题和内容且随鼠标移动而移动

点评：本文为大家介绍下使用Jquery创建一个层显示标题的内容且随鼠标移动，感兴趣的朋友可以参考下，希望对大家有所帮助！

复制代码 代码如下:

<script src="Core/Public/js/jquery.js" type="text/javascript"></script> //引入Jquery 

<style type="text/css"> //编写创建的p的样式 

#tooltip 

{ 

position: absolute; 

border: 1px #solid #333; 

background: #f7f5d1; 

padding: 1px; 

color: #333; 

display: none; 

} 

</style> 

<script type="text/javascript"> //编写JS代码 

$(function () { 

var x = 10; 

var y = 10; 

$("a.tooltip").mouseover(function (e) { //当鼠标指针从元素上移入时 

this.myTitle = this.title; 

this.title = ""; 

var tooltip = "<p id='tooltip'>" + this.myTitle + "</p>"; 

$("body").append(tooltip); 

$("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show("fast"); 

}).mouseout(function () { //当鼠标指针从元素上移开时 

this.title = this.myTitle; 

$("#tooltip").remove(); 

}).mousemove(function (e) { //当鼠标指针从元素上移动时 

$("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }); 

}); 

}); 

</script> 

//html代码 

<ul> 

<li><a href="#" class="tooltip" title="甜美宽松毛衣">1111111111111</a></li> 

<li><a href="#" class="tooltip" title="是撒啊得瑟得">2222222222222</a></li> 

</ul>