如何在jQuery中使用.hover事件獲取html座標？

大家可以幫助我如何創建一個包含xy座標的工具提示嗎？這裏是我的示例代碼：如何在jQuery中使用.hover事件獲取html座標？

<style type="text/css"> 
     a img { 
      border: 3px solid blue; 
     } 

     #largeImage { 
      position: absolute; 
      padding: .5em; 
      background: #e3e3e3; 
      border: 1px solid #bfbfbf; 
     } 
    </style> 

    <script type="text/javascript"> 
     $(function() { 
      var offsetX = 20; 
      var offsetY = 10; 

      $('a').hover(function(e) { 
       var href = $(this).attr('href'); 

       var x = e.pageX - this.offsetLeft; 
       var y = e.pageY - this.offsetTop; 

       $('<div id="largeImage">' + 'X: ' + x + ' Y: ' + y + '</div>') 
       .css('top', e.pageY + offsetY) 
       .css('left', e.pageX + offsetX) 
       .appendTo('body'); 
      }, function() { 
       $('#largeImage').remove(); 
      }); 

      $('a').mousemove(function(e) { 
       $('#largeImage') 
       .css('top', e.pageY + offsetY) 
       .css('left', e.pageX + offsetX); 
      }); 
     }); 
    </script> 

<body> 
    <a href="Images/FredLarge.jpg"> 
     <img src="Images/FredSmall.jpg" alt="squidward" /> 
    </a> 
</body>

在這個例子中發生的事情是座標沒有改變。雖然它獲取座標，但不會改變。

*此代碼實際上就像圖像的工具提示，所以只需忽略id名稱即可。

來源

2012-04-03 kimbebot

hover不連續發射。它只會在你移動時觸發一次，當你移出時只會觸發一次。所以這就是爲什麼它不隨鼠標移動。改爲嘗試綁定到mousemove。 jQuery文檔甚至有一個將鼠標懸停在正方形上並顯示座標的示例。

來源

2012-04-03 02:36:02 mrtsherman

謝謝！現在我知道在網上沒有這樣的教程的原因。 – kimbebot 2012-04-03 03:12:10

如何在jQuery中使用.hover事件獲取html座標？

回答

相關問題