jQuery将div悬停在另一层下方 [英] jQuery hover div underneath another layer

问题描述

是否可以忽略所有高于"元素的 div，这些 div 使用 jQuery 与它们绑定了悬停?例如，我有一个绑定了悬停事件的元素 A，但还有其他元素 B、C、D 位于元素 A 上方绝对定位".因此，当用户的鼠标移到元素 B、C 上时，D，即使 B、C 和 D 直接位于元素上方，也不再触发悬停事件.是否可以忽略元素 B C 和 D?

Is it possible to ignore all divs that are "above" the element that has hover binded to them with jQuery? For example, I have an element A that has a hover event binded to it, but there also other elements B, C, D that are "absolute positioned" above element A. So when the user's mouse moves over to element B, C, D, the hover event is no longer fired even if B, C, and D are directly above the element. Is it possible to ignore elements B C and D?

更新:我实际上是在尝试创建一个以元素 B、C、D 作为区域标签的地图(元素 A).例如，对于纽约州的地图，您将有文本元素曼哈顿"、新泽西"等与地图重叠.这就是为什么即使用户将鼠标悬停在标签上，我也需要触发悬停.

UPDATE: I'm actually trying to create a map (element A) with elements B, C, D as area labels. So for example, for a map of New York state, you will have text elements "Manhattan", "New Jersey", etc overlapping the map. This is why I need the hover to fire even if the user has his mouse over the labels.

推荐答案

如果你可以使用 CSS3 那么你可以为绝对定位的元素设置 pointer-events:none，见 这里有演示.

If you can use CSS3 then you can set pointer-events:none for the absolutely positioned elements, see demo here.

所有现代浏览器都支持这个属性 - 只有 IE9 及以下和 Opera Mini 不支持它(在撰写本文时).这也意味着对于那些可能不是您想要的元素，您不会有任何指针事件.

All modern browsers support this property - only IE9 and below and Opera Mini do not support it (at the time of writing). It also means you will not have any pointer-events for those elements which might not be exactly what you want.

这篇关于jQuery将div悬停在另一层下方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！