由于 z-index 导致的 jQuery 悬停问题

Posted 2023-03-06

【中文标题】由于 z-index 导致的 jQuery 悬停问题

【英文标题】：jQuery hover problem due to z-index

【发布时间】：2011-03-31 20:28:06

【问题描述】：

我想使用 jQuery 为元素触发悬停事件，但我使用 z-index 在元素上放置了一个半透明的 png。有没有办法告诉jQuery忽略png并触发它下面元素的悬停事件？

【参考方案1】：

如果您使用的是支持 css3 的现代浏览器，请尝试将此行添加到透明 png 的 css 规则中：pointer-events: none; 它基本上告诉浏览器忽略此元素上的所有鼠标事件。

例如：

img

    pointer-events: none;

https://developer.mozilla.org/en/css/pointer-events

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

例如，如果您的图像 id 是 #img 并且您的底层元素 id 是 #elem 您可以这样做：

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

根据您的 DOM 的设置方式，您可能需要稍微处理一下，这里是文档 http://api.jquery.com/mouseenter/

【讨论】：

谢谢！那行得通，我想对于非现代浏览器来说它是行不通的，对吧？

我刚刚使用 jQuery 解决方案编辑了我的答案，它可能适用于旧版浏览器 :)

真棒剃须刀。你怎么知道这种东西？这是一种真正有用且完全不为人知的知识。 GG伴侣

大量挖掘 css3 文档。 :P MDC (developer.mozilla.org/en-US) 是一个很好的起点。

不错的解决方案@RazorStorm！但是一个 div 可以在另外 2 个较小的元素上，我们不知道触发鼠标悬停的 div 是什么。你有什么想法吗？