1.效果如图
2.实现思路
1 鼠标移入标题（这里是<a>标签）
创建一个div，div的内容为鼠标位置的文本
将创建好的div加到文档中
为提示层设置位置
2 鼠标移出标题
移除div
3 当鼠标在标题内移动时
同样添加div效果
3.JQuery实现代码
代码
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title></title>
6 </head>
7
8 <style type="text/css">
9 body
10 {
11 font-size:12px;
12 }
13 a
14 {
15 text-decoration:none;
16 }
17 a:hover
18 {
19 color:#CC0000;
20 }
21 #main
22 {
23 margin:100px auto;
24 width:350px;
25 height:150px;
26 border:solid #aaa 1px;
27 }
28 .tr_color{
29 background-color:#aaa;
30 }
31 </style>
32
33 <script src="../JQuery/jquery-1.4.2.min.js" type="text/javascript"></script>
34 <script type="text/javascript">
35 $(function(){
36 $("tr:even").addClass("tr_color");
37
38 $("#tb a").mouseover(function(e){
39 var toolTip = "<div id='tooltip' width='100px' height='12px' style='position:absolute;border:solid #aaa 1px;background-color:#F9F9F9'>" + $(this).html() + "</div>";
40 $("body").append(toolTip);
41 $("#tooltip").css({
42 "top" :e.pageY + "px",
43 "left" :e.pageX + "px"
44 });
45
46 $("#tb a").mouseout(function(){
47 $("#tooltip").remove();
48 });
49
50 $("#tb a").mousemove(function(e){
51 $("#tooltip").css({
52 "top" :(e.pageY+5) + "px",
53 "left" :(e.pageX+2) + "px"
54 });
55 });
56 //alert("Y:" + e.pageY + "X:" + e.pageX);
57 });
58 });
59 </script>
60 <body>
61 <div id="main">
62 <h5>JQuery--鼠标跟随提示</h5>
63 <table id="tb" width="100%">
64 <tr>
65 <td><a href="#">中秋快乐11</a></td>
66 <td><a href="#">中秋快乐12</a></td>
67 </tr>
68 <tr>
69 <td><a href="#">中秋快乐21</a></td>
70 <td><a href="#">中秋快乐22</a></td>
71 </tr>
72 <tr>
73 <td><a href="#">中秋快乐31</a></td>
74 <td><a href="#">中秋快乐32</a></td>
75 </tr>
76 <tr>
77 <td><a href="#">中秋快乐41</a></td>
78 <td><a href="#">中秋快乐42</a></td>
79 </tr>
80 <tr>
81 <td><a href="#">中秋快乐51</a></td>
82 <td><a href="#">中秋快乐52</a></td>
83 </tr>
84 <tr>
85 <td><a href="#">中秋快乐61</a></td>
86 <td><a href="#">中秋快乐62</a></td>
87 </tr>
88 </table>
89 </div>
90 </body>
91 </html>
代码很简单主要是用到了JQuery的三个事件mouseover,mouseout,mousemove.