檢查鼠標是否在元素的上方jQuery

我想檢查鼠標當前是否在div的可見區域內。我知道我可以使用下面的代碼：檢查鼠標是否在元素的上方jQuery

$("#div").is(":hover");

在jQuery中。

但是，在我的#div上可能會有另一個div，所以懸停對我的情況不起作用。

我需要檢查鼠標是否位於某個元素的上方，而不管位於其上的任何元素（防止懸停檢查）。

來源

2013-04-07 Twinone

如果「B元素」，也就是部分地遮蔽你的「元素A」，而不是「元素A」的後代，你必須以編程方式檢查「元素A」與鼠標位置的位置。 – ahren 2013-04-07 13:19:36

我寧願避免這種情況。但如果它真的是唯一的方法，我必須這樣做。謝謝。 – Twinone 2013-04-07 13:20:37

不用擔心。祝你好運！（PS，可能很適合在'body'層次上或者在最接近祖先的層次上捕獲「元素A」和「元素B」級別的事件 - 如果瀏覽器的計算量變得太大，那麼考慮對它進行限制） – ahren 2013-04-07 13:22:26

如果您不需要將任何操作應用於div上方的元素，則可以簡單地將pointer-events：none應用於它。這應該解決你的問題，你應該可以使用$（'＃div'）。hover（）完全正確。

測試示例。

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>TEST</title> 
    <style> 
     div { 
      width:50px; 
      height:50px; 
      position:absolute; 
     } 
     div#one { 
      top:0; 
      background:orange; 
     } 
     div#two { 
      top:20px; 
      background:blue; 
      opacity:1; 
      pointer-events:none; 
     } 
    </style> 
</head> 
<body> 
    <div id="one"> 
    </div> 
    <div id="two"> 
    </div> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script> 
    $(function(){ 
     $('div#one').click(function(){ 
      alert('one-clicked'); 
     }); 
     $('div#one').hover(function(){ 
      console.log('one is being hovered!') 
     }); 
    }); 
    </script> 
</body> 
</html>

一切順利，沙洛姆

來源

2013-09-13 22:22:40

檢查鼠標是否在元素的上方jQuery

回答

相關問題