鼠标悬浮一行弹出提示文本说明效果
有时候，我们希望能够再鼠标悬浮一行的时候弹出提示说明效果。
下面就通过代码实例介绍一下如何使用jquery实现此功能。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
#leo {
position: absolute;
border: 1px solid grey;
opacity: 0.8;
background: grey;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function () {
x = 5;
y = 15;
$("p").hover(function (e) {
otitle = this.title;
this.title = "";
var ndiv = "<div id='leo'>" + otitle + "</div>";
$("body").append(ndiv);
$("#leo").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show(2000);
$(this).mousemove(function (e) {
$("#leo").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show(1000);
});
}, function () {
this.title = otitle;
$("#leo").remove();
});
});
</script>
</head>
<body>
<p title="前端教程网一">只有努力奋斗才会有美好的未来。</p>
<p title="前端教程网二">前端教程网欢迎您，欢迎提供建议和意见。</p>
<p title="前端教程网三">本站的url地址是pipipi.net。</p>
<p title="前端教程网四">只有当前的时间才是最为珍贵的。</p>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.$(function () {})，当文档结构完全加载完毕再去执行函数中的代码。
（2）.x = 5和y = 15，用来规定弹出的层距离鼠标指针的距离。
（3）.$("p").hover(function (e) {}, function () {})，为p元素注册事件处理函数，也就是规定鼠标悬浮和鼠标离开要执行的函数。
（4）. otitle = this.title,获取当前鼠标悬浮的p元素的title属性值，并赋值给变量otitle。
（5）.this.title = ""，这个代码和上一段代码的目的是为了防止默认的title弹出层的出现，我们要显示的是自定义的。
（6）.var ndiv = "<div id='leo'>" + otitle + "</div>"，这是弹出的自定义信息层。
（7）.$("body").append(ndiv)，追加到body中。
（8）.$("#leo").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show(2000)，设置弹出层的坐标，并且显示出来。
（9）. $(this).mousemove(function (e) {
$("#leo").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show(1000);
})，为当前元素注册mousemove事件处理函数。
也就是实现了当鼠标移动的时候，弹出层能够跟随移动。
（10）.function () {
this.title = otitle;
$("#leo").remove();
})，规定当鼠标离开时候，将元素的title属性复原，并且移除弹出层。
二.相关阅读:
（1）.hover()可以参阅jQuery hover事件一章节。
（2）.append()可以参阅jQuery append()一章节。
（3）.css()可以参阅jQuery css()一章节。
（4）.pageY可以参阅jQuery event.pageY一章节。
（5）.mousemove()可以参阅jQuery mousemove事件一章节。
（6）.remove()可以参阅jQuery remove()一章节。
鼠标悬浮一行弹出提示文本说明效果，这样的场景在实际项目中还是用的比较多的，关于鼠标悬浮一行弹出提示文本说明效果就介绍到这了。
鼠标悬浮一行弹出提示文本说明效果属于前端实例代码，有关更多实例代码大家可以查看。