JQuery实现一个简单的鼠标跟随提示效果
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.