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

Question

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

Answer 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/