由于z-index引起的jQuery hover问题

Question

我想使用jQuery触发一个元素的hover事件，但是我有一个带有z-index定位在元素上方的半透明png图片。是否有办法告诉jQuery忽略png并触发位于其下面的元素的hover事件？

- user424616

Answer 1

如果您正在使用支持 CSS3 的现代浏览器，请尝试向透明 PNG 的 CSS 规则中添加以下行：pointer-events: none;
这基本上告诉浏览器忽略此元素上的所有鼠标事件。

例如：

img
{
    pointer-events: none;
}

https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events

如果你的目标浏览器不支持 CSS3，你可以捕获鼠标事件，然后在底层元素上触发一个新的鼠标事件。

例如，如果你的图片 id 是 #img，底层元素的 id 是 #elem，则可以这样做：

$("#elem").hover(function(e){
     $("#img").mouseenter(e);
});

根据您的DOM设置情况，您可能需要稍微调整一下。 这是文档：http://api.jquery.com/mouseenter/

- Razor Storm

---

谢谢！那个有效，我猜对于非现代浏览器来说就不行了，是吗？ - user424616

我刚使用jQuery编写了一个解决方案，可能适用于旧版本的浏览器 :) - Razor Storm

真棒的 Razor。你怎么知道这种东西？这是非常有用但鲜为人知的知识。干得好，伙计。 - Marcel Falliere

翻译：需要大量查阅CSS3文档。:P MDC（https://developer.mozilla.org/en-US/）是一个很好的起点。 - Razor Storm

很棒的解决方案 @RazorStorm！但是一个div可以放在另外2个更小的元素之上，我们不知道哪一个div会触发鼠标悬停事件。你有什么办法来解决这个问题吗？ - Renan Araújo