关于超链接自动提示的demo 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 "http://www.w3.org/TR/html4/strict.dtd">
 3 
 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 7         <title>test</title>
 8         <meta name="author" content="Administrator" />
 9         <script type="text/javascript" src="script/jquery-1.12.2.js"></script>
10         <!-- Date: 2016-03-23 -->
11     </head>
12     <body>
13         <p>
14             <a href="#" class="tooltip" title="这是我的超链接提示1">提示1</a>
15         </p>
16         <p>
17             <a href="#" class="tooltip" title="这是我的超链接提示2">提示2</a>
18         </p>
19         <p>
20             <a href="#" title="这是自带提示1">自带提示1</a>
21         </p>
22         <p>
23             <a href="#" title="这是自带提示2">自带提示2</a>
24         </p>
25         <script type="text/javascript">
26             $(function() {
27                 $("a.tooltip").mouseover(function(e) {
28                     //创建div元素
29                     var tooltip = "<div id = 'tooltip'>" + this.title + "</div>";
30                     $("body").append(tooltip);
31                     //追加到文档。
32                     $("#tooltip").css({
33                         "float":"right",
34                         "font-size":"30px"
35                     }).show();
36                 }).mouseout(function() {
37                     $("#tooltip").remove();
38                 });
39             });
40         </script>
41     </body>
42 </html>

 

posted @ 2016-03-23 16:14  Arther_J  阅读(153)  评论(0)    收藏  举报