HTML代码:
<body>
<p><a href="#" class="Hyperlink" title="超链接1">超链接·1</a></p>
<p><a href="#" class="Hyperlink" title="超链接2">超链接·2</a></p>
<p><a href="#" title="自动提示超链接1">自动提示·1</a></p>
<p><a href="#" title="自动提示超链接2">自动提示·2</a></p>
</body>
jQuery代码:
<script type="text/javascript">
$(function () {
//鼠标位于 a标签上方时发生 mouseover 事件
$("a.Hyperlink").mouseover(function (e) {
this.Mytitle = this.title;//获取超链接 title属性的内容
this.title = ""; //设置 title属性内容为空
$("body").append("<div id='div_toop'>" + this.Mytitle + "</div>");//将要显示的内容添加到 新建 div标签中 并追加到 body 中
$("#div_toop")
.css({
//设置 div 内容位置
"top": (e.pageY + 10) + "px",
"position": "absolute",//添加绝对位置
"left": (e.pageX + 20) + "px"
}).show("fast");// show(spe.ed,callback) speed: xian'shi'su'du
}).mouseout(function () { //鼠标指针从 a标签 上离开时 发生mouseout 事件
this.title = this.Mytitle;
$("#div_toop").remove();//移除对象
}).mousemove(function (e) { //鼠标指针在 a标签 中移动时 发生mouseout 事件
$("#div_toop")
.css({
//设置 div 内容位置
"top": (e.pageY + 10) + "px",
"position": "absolute",//添加绝对位置
"left": (e.pageX + 20) + "px"
});
});
});
</script>