检查鼠标是否在元素的上方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

回答

相关问题