View Code
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <html>
3 <head>
4 <title>自定義Tooltip特效</title>
5 <style type="text/css">
6 body ul
7 {
8 list-style: none;
9 }
10
11 body li
12 {
13 margin: 60px;
14 }
15
16 div
17 {
18 border: 1px solid #CCC;
19 padding: 10px;
20 background: #dff5ff;
21 margin-left: 30px;
22 }
23 </style>
24 <!--通過js，代替超連結中的title-->
25 <script language="javascript" type="text/javascript">
26 function initEvent() {
27 var links = document.getElementsByTagName("a");
28
29 for (var i = 0; i < links.length; i++) {
30 var link = links[i];
31 link.onmouseover = linkOnMouseOver;
32 link.onmouseout = linkOnMouseOut;
33 }
34 }
35
36 function linkOnMouseOver() {
37 var newdiv = document.createElement("div");
38 newdiv.className = "Tooltip";
39 newdiv.style.position = "absolute";
40 newdiv.style.top = window.event.clientY;
41 newdiv.style.left = window.event.clientX;
42
43 newdiv.innerHTML = "我是自定義的Tooltip，用來代替超連結中的title";
44 document.body.appendChild(newdiv);
45 }
46
47 function linkOnMouseOut() {
48 var divs = document.getElementsByTagName("div");
49 for (var i = 0; i < divs.length; i++) {
50 var newdiv = divs[i];
51 if (newdiv.className == "Tooltip") {
52 document.body.removeChild(newdiv);
53 }
54 }
55 }
56 </script>
57 </head>
58 <body onload="initEvent()">
59 <ul>
60 <li><a href="#" title="百度搜尋引擎" target="_blank">百度</a></li>
61 <li><a href="#" title="今天你山寨了嗎？" target="_blank">騰訊</a></li>
62 <li><a href="#" title="新浪微網誌" target="_blank">新浪</a></li>
63 <li><a href="#" title="搜你輸入法真好用" target="_blank">搜狐</a></li>
64 </ul>
65 </body>
66 </html>