版权声明：转载请注明出处：http://blog.csdn.net/Guobeibei_123 https://blog.csdn.net/Guobeibei_123/article/details/80762764
实现超链接鼠标的提示效果
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#href_one {
position:absolute;
border:1px solid black;
background:aqua;
padding:1px;
color:black;
display:none;
}
a {
text-decoration:none;/*超链接去掉下划线*/
}
</style> <script src="Scripts/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(function () {
//定义X轴的坐标
var x = 10;
//定义Y轴的坐标
var y = 20;
//超链接的点击事件，鼠标指针位于元素上方时
$("a.href_one").mouseover(function (e) {//mouseover:当鼠标指针位于元素上方时，会发生 mouseover 事件。
//鼠标覆盖时显示title
this.my_href = this.title;
this.title = "";
//创建div元素
var href_one = "<div id='href_one'>" + this.my_href + "<\/div>";
//把创建好的div元素追加到文档中
$("body").append(href_one);
//追加样式
$("#href_one").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show("fast");
//mouseout:当鼠标指针从元素上移开时，发生 mouseout 事件。
}).mouseout(function () {
//鼠标移开时不显示title
this.title = this.my_href;
$("#href_one").remove();
//mousemove:当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。其X/Y代表鼠标的坐标
}).mousemove(function (e) {
//鼠标移动时，title跟随鼠标移动
$("#href_one").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" });
});
});
</script>
</head>
<body>
<p><a href="#" title="这是一个超链接1" class="href_one">我是超链接1</a></p>
<p><a href="#" title="这是一个超链接2" class="href_one">我是超链接2</a></p>
</body>
</html>