标签：
鼠标悬浮于链接之上出现文字说明效果:
对于超链接<a>标签，有一个title属性，当鼠标表悬浮于链接之上时候，就会显示title的属性值，虽然在一定程度上满足了我们的需要，但是美观度却似差强人意，同时无法修改它的样式，下面就来介绍一下如何利用jquery模拟实现此功能。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ var x = 7; var y = 8; $("a.tip").hover(function(){ var title=this.title; var $div=$("<div id=‘newTip‘>"+title+"</div>"); $(this).append($div); $(this).css({"position":"relative"}); $div.css({"position":"absolute","background":"pink"}); $div.css({"width":"120px","height":"30px"}); },function(){ $("#newTip").remove(); }).mousemove(function(e){ var $div = $("#newTip").css({"left":(e.pageX+x)+‘px‘,"top":(e.pageY+y)+‘px‘}); }); }) </script> </head> <body> <a href="#" class="tip" title="蚂蚁部落欢迎您">蚂蚁部落</a> </body> </html>
以上代码当鼠标悬浮于链接之上的时候，能够出现文字说明并且能够跟随鼠标移动，下面介绍一下它的实现过程。
一.代码注释:
1.$(function(){))，当稳当结构完全加载完毕再去执行函数中的代码。
2.var x = 7，var y = 8，声明两个变量用来定义鼠标指针和弹出的层的横向和纵向距离。
3.$("a.tip").hover(function(){ },function(){})，为指定的链接添加鼠标悬浮和鼠标离开时要执行的函数。
4.var title=this.title，将当前链接的title属性值赋值给变量title。
5.var $div=$("<div id=‘newTip‘>"+title+"</div>")，创建一个jquery对象，其实就是div中放入title属性值，这个也就是要弹出的层。
6.$(this).append($div)，将创建的div添加到当前链接<a>中。
7.$(this).css({"position":"relative"})，将超链接a设置为相对定位，因为弹出层是绝对定位，那么定位参考对象就可以是链接a了。
8. $div.css({"position":"absolute","background":"pink"})，将div的设置为绝对定位，背景颜色为粉色。
9.$div.css({"width":"120px","height":"30px"})，设置div的尺寸。
10.$("#newTip").remove()，删除指定id的元素，这里就是删除弹出的div。
11.mousemove(function(e){})，注册mousemove事件处理函数，当然这里采用的是链式调用。
12.var $div = $("#newTip").css({"left": (e.pageX+x)+‘px‘,"top": (e.pageY+y)+‘px‘})，设置弹出div的left和top属性值，实现跟随效果。
二.相关阅读:
1.hover()可以参阅jQuery的hover事件一章节。
2.this可以参阅javascript的this用法详解一章节。
3.append()函数可以参阅jQuery的append()方法一章节。
4.css()函数可以参阅jQuery的css()方法一章节。
5.remove()函数jQuery的remove()方法一章节。
6.mousemove事件可以参阅jQuery的mousemove事件一章节。
7.e.pageX可以参阅jQuery的event.pageX属性一章节。
8.相对定位可以参阅CSS的相对定位一章节。
9.绝对定位可以参阅CSS的绝对定位一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11405
更多内容可以参阅:http://www.softwhy.com/jquery/
标签：
原文地址：http://www.cnblogs.com/zhengzebiaodashi/p/5122716.html
