ToolTip效果通过Js实现代替超链接中的title

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     
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>