jQuery将divhover在另一层下面
是否可以忽略所有使用jQuery绑定到它们的元素“上方”的div？ 例如，我有一个元素A，它有一个绑定到它的hover事件，但是还有其他元素B，C，D在元素A上面“绝对定位”。所以当用户的鼠标移动到元素B，C时， D，即使B，C和D直接位于元素上方，也不再触发hover事件。 是否可以忽略元素BC和D？
更新：我实际上正在尝试创建一个地图（元素A），其中元素B，C，D作为区域标签。 因此，例如，对于纽约州的地图，您将具有与地图重叠的文本元素“曼哈顿”，“新泽西”等。 这就是为什么即使用户将鼠标放在标签上也需要hover。
如果您可以使用CSS3，那么您可以为绝对定位的元素设置pointer-events:none ，请参见此处的演示 。
所有现代浏览器都支持此属性 – 仅IE9及以下版本和Opera Mini不支持它（在撰写本文时）。 这也意味着你不会有那些可能不是你想要的元素的指针事件。
我看到它的方式，你有几个选择：
- 像Ivarska推荐的那样，在所有这些元素上创建一个空元素并将其用于触发器。
- 绑定到整个页面上的mousemove并找到它“在框内”（即在目标元素上） – 基本上，重新发明hover事件。 （但这不会给你的页面增加一些非常严重的开销）
- 重新设计
您也可能只能绑定到目标（即A）和任何可能与A重叠的元素，然后只检查另一个控件中的鼠标位置是否也会假设在A控件内。 比绑定到页面和检查更少的开销，但仍然超过典型。
使用e.relatedTarget确定用户是否hover在其中一个嵌套（绝对）元素上。 如果你给地图标签一个类，可能会更容易
例如：在地图上显示hover状态期间的标签，并仅在用户离开地图时隐藏它们
$("#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(); } );
我现在想到的唯一解决方案是在顶部创建一个不可见元素并为其添加hover触发器。
您可以使A元素的z-index高于B，C和D元素的z-index。
虽然有不同的方法来解决这个问题，但最简单的方法是将hover事件添加到所有元素：
HTML
unhovered
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/
其他人提到的z-index调整工作。 使您希望通过hover识别的项目的z-index更高。