Question

是否可以忽略所有使用jQuery绑定到它们的元素“上方”的div？例如，我有一个元素A，它有一个绑定到它的悬停事件，但是还有其他元素B，C，D在元素A上面“绝对定位”。所以当用户的鼠标移动到元素B，C时， D，即使B，C和D直接位于元素上方，也不再触发悬停事件。是否可以忽略元素B C和D？

更新我实际上正在尝试创建一个地图（元素A），其中元素B，C，D作为区域标签。因此，例如，对于纽约州的地图，您将具有与地图重叠的文本元素“曼哈顿”，“新泽西”等。这就是为什么即使用户将鼠标放在标签上也需要悬停才能开火。

Answer 1

如果您可以使用CSS3，那么您可以为绝对定位的元素设置pointer-events:none，请参阅demo here。

All modern browsers支持此属性 - 仅IE9及以下版本和Opera Mini不支持它（在撰写本文时）。这也意味着你不会有那些可能不是你想要的元素的指针事件。

Answer 2

我看到它的方式，你有几个选择：

像Ivarska推荐的那样，在所有这些元素上创建一个空元素并将其用作触发器。
绑定到整个页面上的mousemove并找到它“在框内”（即在目标元素上） - 基本上，重新发明悬停事件。（但这不会给你的页面增加一些非常严重的开销）
重新设计

您也可能只能绑定到目标（即A）和任何可能与A重叠的元素，然后只检查另一个控件中的鼠标位置是否也会假设在A控件内。比绑定到页面和检查更少的开销，但仍然超过典型。

Answer 3

使用e.relatedTarget确定用户是否悬停在其中一个嵌套（绝对）元素上。如果你给地图标签一个类

，也许会更容易

例如：在地图上显示悬停状态期间的标签，并仅在用户离开地图时隐藏它们

    $("#map").hover(
      function(e) { 
        $(this).find(".labels").fadeIn();
      },

      function(e) {
        if( $(e.relatedTarget).hasClass("maplabel") ) {
          //The user has hovered over a label...Do nothing (or some other function)
        } else {
          // User has left the map and isn't over a label
          $(this).find(".labels").fadeOut();
      }
    );

Answer 4

我现在想到的唯一解决方案是在顶部创建一个不可见的元素并为其添加悬停触发器。

Answer 5

你可以使A元素的z-index高于B，C和D元素的z-index。

Answer 6

虽然有不同的解决方法，但最简单的方法是将悬停事件添加到所有元素中：

<强> HTML

<div id="a" class="hover"></div>
<div id="b" class="hover"></div>
<div id="c" class="hover"></div>
<div id="d" class="hover"></div>
<div id="state">unhovered</div>

<强> CSS

#a {
    width: 350px;
    height: 300px;
    border: 1px solid #000;
    background-color: #ccc;
}
#b {
    position: absolute;
    top: 35px;
    left: 35px;
    width: 35px;
    height: 30px;
    border: 1px solid #000;
    background-color: #cca;
}
#c {
    position: absolute;
    top: 85px;
    left: 85px;
    width: 35px;
    height: 30px;
    border: 1px solid #000;
    background-color: #cca;
}
#d {
    position: absolute;
    top: 85px;
    left: 135px;
    width: 35px;
    height: 30px;
    border: 1px solid #000;
    background-color: #cca;
}

<强>的jQuery

$(document).ready(function(){
    $('.hover').hover(
        function(){
            $('#state').text('hovered');
        },
        function(){
            $('#state').text('unhovered');
        }
    );
});

此处示例：http://jsfiddle.net/userdude/H5TAG/

Answer 7

其他人提到的z-index调整工作。使您想要通过悬停识别的项目的z-index更高。

jQuery将div悬停在另一层下面

7 个答案: