效果体验:http://hovertree.com/texiao/jsstudy/2/
实现思路
1 鼠标移入标题(这里是<a>标签)
创建一个div,div的内容为鼠标位置的文本
将创建好的div加到文档中
为提示层设置位置
2 鼠标移出标题
移除div
3 当鼠标在标题内移动时
同样添加div效果
上面是跟随光标的,这个是居中的:
http://hovertree.com/texiao/jsstudy/2/1.htm
跟随光标完整代码如下:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>jQuery弹出光标跟随提示框- 何问起</title><base target="_blank" />
6 <style type="text/css">
7 #tooltip {
8 position: absolute;
9 border: #333 1PX solid;
10 background: #f7f5d1;
11 padding: 1px;
12 color: #333;
13 display: none;
14 padding: 1px;
15 }a{color:blue}
16 #hovertree,#yestop,#hoverclock{width:789px;margin:20px auto}
17 </style>
18 <script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
19 </head>
20 <body>
21 <div id="hovertree"><a href="http://hovertree.com" class="tooltip" title="何问起首页">何问起首页</a> <a href="http://hovertree.com/texiao/" class="tooltip" title="网页特效库">特效</a></div>
22 <div id="yestop"><a href="http://hovertree.com/h/bjaf/tishikuang.htm" class="tooltip" title="本效果代码">原文</a>
23 <a href="http://hovertree.com/texiao/jsstudy/2/" class="tooltip" title="本效果网址">效果</a>
24 <br /><br /><a href="#" class="tooltip" title="弹出层">test</a>
25 </div>
26
27 <div id="hoverclock">请把光标在各个链接上面移动,将会弹出跟随光标的提示框。
28
29 <br /></div>
30 <script>
31 $(function () {
32 var x = 15;
33 var y = 10;
34 $("a.tooltip").mouseover(function (e) { //当鼠标指针从元素上移入时
35 this.myTitle = this.title;
36 this.title = "";
37 var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>";
38 $("body").append(tooltip);
39 $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show("fast");
40 }).mouseout(function () { //当鼠标指针从元素上移开时
41 this.title = this.myTitle;
42 $("#tooltip").remove();
43 }).mousemove(function (e) { //当鼠标指针从元素上移动时
44 $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" });
45 });
46 });
47 </script>
48 </body>
49 </html>