需求描述：当鼠标悬停在一个元素上的时候，显示气泡，气泡内容可以是一段文字或图片。实现如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>气泡显示</title> 6 <script src="../jquery-1.7.2.min.js"></script> 7 <style type="text/css"> 8 .container { 9 margin-top: 130px; 10 } 11 #xsztip { 12 padding: 8px 12px; 13 width: 140px; 14 display: block; 15 font-size: 16px; 16 color: #fff; 17 font-weight: bold; 18 background: #ED5517; 19 cursor: pointer; 20 } 21 #xszimg { 22 position: absolute; 23 display: none; 24 padding: 10px; 25 width: 160px; 26 background: #e0edf7; 27 border-radius: 6px; 28 } 29 30 #xszimg::before { 31 content: ""; 32 position: relative; 33 top: -20px; 34 left: 10px; 35 width: 0; 36 height: 0; 37 display: block; 38 border-left: 10px solid transparent; 39 border-right: 10px solid transparent; 40 border-bottom: 10px solid #e0edf7; 41 } 42 </style> 43 </head> 44 <body> 45 <div class="container"> 46 <span id="xsztip">鼠标悬停显示气泡</span> 47 <div id="xszimg"> 48 <span>The quick fox jumps over a lazy dog.</span> 49 </div> 50 </div> 51 <script type="text/javascript"> 52 $(function(){ 53 $("#xsztip").hover(function(){ 54 show_xszimg(this); 55 },function(){ 56 show_xszimg(); 57 }); 58 function show_xszimg(f){ 59 var d=$("#xszimg"); 60 if(!f){ 61 d.fadeOut() 62 }else{ 63 var c=$(f); 64 var e=c.offset(); 65 var a=e.left; 66 var b=e.top + 44; 67 d.css({left:a+"px",top:b+"px"}).show(); 68 } 69 } 70 }); 71 </script> 72 </body> 73 </html>
效果截图：
