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>
原文：http://www.cnblogs.com/sumg/p/3787784.html