自定义鼠标悬浮链接弹出提示代码实例
鼠标悬浮链接会弹出一个提示效果，这个效果是利用title属性定义的。
不过自带的这个提示不够美观，在实际应用中很难满足需要，下面就通过代码实例介绍一下如何自定义此效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
span {
background-color: #dedebe;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function() {
var x = 5;
var y = 10;
$("a.tooltip").mouseover(function() {
this.myTitle = this.title;
this.title = "";
var tooltip = "<span id='tooltip'>" + this.myTitle + "</span>";
$("body").append(tooltip);
$(this).mousemove(function(e){
$("#tooltip").css({
position : "absolute",
left : (e.pageX + x) + "px",
top : (e.pageY + y) + "px"
}).show("fast");
})
}).mouseout(function() {
$(this).unbind("mousemove");
this.title = this.myTitle;
$("#tooltip").remove();
});
});
</script>
</head>
<body>
<a href="#" class="tooltip" title="pipipi.net">前端教程网欢迎您</a>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.$(function() {})，文档结构完全加载完毕再去执行函数中的代码。
（2）.var x = 5，声明一个变量并赋值为5，用来规定鼠标指针距离弹出层横向距离。
（3）.var y = 10，声明一个变量并赋值为5，用来规定鼠标指针距离弹出层的纵向距离。
（4）. $("a.tooltip").mouseover(function() {})，为链接注册mouseover事件处理函数。
（5）.this.myTitle = this.title，将当前链接的title属性值写入自定义属性myTitle。
（6）.this.title = ""，将链接的title属性值清空，否则鼠标悬浮的时候，自带的提示层也会展现。
（7）.var tooltip = "<span id='tooltip'>" + this.myTitle + "</span>"，提示层html字符串。
（8）.$("body").append(tooltip)，在body内容添加这个提示曾。
（9）.$(this).mousemove(function(e){})，注册mousemove事件处理函数。
（10）.$("#tooltip").css({
position : "absolute",
left : (e.pageX + x) + "px",
top : (e.pageY + y) + "px"
}).show("fast")，当鼠标移动的时候，弹出层能够实现跟随。
（11）.mouseout(function() {
$(this).unbind("mousemove");
this.title = this.myTitle;
$("#tooltip").remove();
}),当鼠标离开链接，那么就会将title属性值还原，同事解绑 mousemove事件处理函数。
并将创建的层删除。
二.相关阅读:
（1）.mouseover事件可以参阅jQuery mouseover事件一章节。
（2）.append()可以参阅jQuery append()一章节。
（3）.mousemove事件可以参阅jQuery mousemove事件一章节。
（4）.pageX可以参阅jQuery event.pageX一章节。
（5）.mouseout事件可以参阅jQuery mouseout事件一章节。
（6）.remove()可以参阅jQuery remove()方法一章节。
自定义鼠标悬浮链接弹出提示代码实例，这样的场景在实际项目中还是用的比较多的，关于自定义鼠标悬浮链接弹出提示代码实例就介绍到这了。
自定义鼠标悬浮链接弹出提示代码实例属于前端实例代码，有关更多实例代码大家可以查看。