滑过链接产生特殊效果
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<title>CSS Tooltips</title>
6
<style type="text/css">
7
<!--
8
9
/* pretty stuff
10
================================== */
11
12body {
13 font-family: "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
14 line-height: 1.2;
15}
16
17/* css tooltip
18================================== */
19
20a.tooltip {
21 position: relative;
22}
23
24a.tooltip span {
25 display: none;
26}
27
28a.tooltip:hover {
29 font-size: 100%; /* Fixes bug in IE5.x/Win */
30}
31
32a.tooltip:hover span {
33 display:block;
34 position:absolute;
35 top:1em;
36 left:2em;
37 padding: 0.2em 0.6em;
38 border:1px solid #996633;
39 background-color:#FFFF66;
40 color:#000;
41}
42
43
-->
44</style>
45</head>
46
47<body>
48<p><a href="http://www.andybudd.com/" class="tooltip">Andy Budd<span> (This website rocks) </span></a> is a web developer based in Brighton England.</p>
49
50</body>
51</html>
52
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />5
<title>CSS Tooltips</title>6
<style type="text/css">
7
<!--8
9
/* pretty stuff
10
================================== */11
12
body {13
font-family: "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;14
line-height: 1.2;15
}16
17
/* css tooltip18
================================== */19
20
a.tooltip {21
position: relative;22
}23
24
a.tooltip span {25
display: none;26
}27
28
a.tooltip:hover {29
font-size: 100%; /* Fixes bug in IE5.x/Win */30
}31
32
a.tooltip:hover span {33
display:block;34
position:absolute;35
top:1em;36
left:2em;37
padding: 0.2em 0.6em;38
border:1px solid #996633;39
background-color:#FFFF66;40
color:#000;41
}42
43
-->44
</style>45
</head>46
47
<body>48
<p><a href="http://www.andybudd.com/" class="tooltip">Andy Budd<span> (This website rocks) </span></a> is a web developer based in Brighton England.</p>49
50
</body>51
</html>52
