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>
