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

问题描述

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

更新：
实际上我试图创建一个贴图（元素A ）元素B，C，D作为区域标签。举例来说，对于纽约州的地图，您将具有与地图重叠的文本元素曼哈顿，新泽西州等。这就是为什么即使用户将鼠标悬停在标签上也需要悬停的原因。

解决方案

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

所有现代浏览器都支持此属性 - 只有IE9及以下版本和Opera Mini不支持它（撰写本文时）。这也意味着你不会有那些可能不是你想要的元素的指针事件。

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?

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.

解决方案

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

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屋！