關於jquery實現的tooltip

 嘗試寫了一個tooltip,不過不能實現,用mousemove tip的div的css隨着鼠標的移動而改變css,一直不能實現,tip的div一直在原先的地方,很奇怪

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml"> 
  5. <head> 
  6.     <title></title> 
  7.     <style type="text/css"> 
  8.         .hoverme{ 
  9.             width:200px; 
  10.             height:150px; 
  11.             border:1px solid blue; 
  12.         } 
  13.     </style> 
  14.     <script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script> 
  15. </head> 
  16.  
  17. <body> 
  18.     <div id="tip" style="display:none;">Ya! I am a tooltip!</div> 
  19.     <div class="hoverme">Hover me for a tooltip.</div> 
  20. </body> 
  21.  
  22. <script type="text/javascript"> 
  23.     $(document).ready(function(){ 
  24.             $('.hoverme').hover(function(){ 
  25.                 $('#tip').fadeIn('slow'); 
  26.                 }, 
  27.                 function() 
  28.                 { 
  29.                 $('#tip').fadeOut('slow'); 
  30.                 }); 
  31.             $('.hoverme').mousemove(function(e){ 
  32.                 var topPosition=e.pageY+5; 
  33.                 var leftPosition=e.pageX+5; 
  34.                 $('#tip').css({ 
  35.                     'top':topPosition+'px', 
  36.                     'left':leftPosition+'px' 
  37.                     }); 
  38.                 }); 
  39.             }); 
  40. </script> 
  41.  
  42.  
  43. </html> 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章