5自定义提示 

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <style type="text/css">
 6         div {
 7             border: 1px solid #000;
 8             padding: 5px;
 9             margin: 2px;
10             width: 100px;
11             position: absolute;
12             display: none;
13             background-color: white;
14         }
15 
16         body {
17             border: 2px dashed;
18         }
19 
20         img {
21             position: absolute;
22         }
23     </style>
24     <title></title>
25     <script src="Scripts/jquery-1.8.2.min.js"></script>
26     <script type="text/javascript">
27         var divMsg;
28         $(function () {
29             divMsg = $("<div></div>");
30             $("body").append(divMsg);
31             $("li").mouseover(function (e) {
32                
33                 divMsg.css({display:"block",left:e.pageX,top:e.pageY}).html(this.getAttribute("content"));
34             }).mouseout(function () {
35                 divMsg.css("display","none");
36             });
37         });
38 
39     </script>
40 </head>
41 <body>
42     <ul>
43         <li content="广州小蛮腰1">广州小蛮腰1</li>
44         <li content="广州小蛮腰2">广州小蛮腰2</li>
45         <li content="广州小蛮腰3">广州小蛮腰3</li>
46         <li content="广州小蛮腰4">广州小蛮腰4</li>
47         <li content="广州小蛮腰5">广州小蛮腰5</li>
48     </ul>
49 </body>
50 </html>

 

posted @ 2014-06-13 23:59  编程猴子  阅读(150)  评论(0)    收藏  举报