由于 z-index 导致的 jQuery 悬停问题
我想使用 jQuery 为元素触发悬停事件，但我使用 z-index 在元素上方放置了一个半透明的 png.有没有办法告诉jQuery忽略png并触发它下面元素的悬停事件?
I want to trigger a hover event for an element using jQuery, but I have an semi-transparent png positioned over the element using z-index. Is there any way to tell jQuery to ignore the png and trigger the hover event for the element underneath it?
推荐答案
如果您使用的是支持 css3 的现代浏览器，请尝试将此行添加到透明 png 的 css 规则中:pointer-events: none;
它基本上告诉浏览器忽略此元素上的所有鼠标事件.
If you are using a modern browser that supports css3, try adding this line to the css rule for the transparent png: pointer-events: none;
It basically tells the browser to ignore all mouse events on this element.
例如:
img
{
pointer-events: none;
}
https://developer.mozilla.org/en/css/pointer-events
或者，如果您的目标浏览器不支持 css3，您可以捕获鼠标事件，然后在底层元素上触发一个新事件.
Alternatively if your targeted browser does not support css3, you can capture the mouse event and then fire a new one on the underlying element.
例如，如果您的图像 id 是 #img 并且您的底层元素 id 是 #elem 您可以这样做:
for example if your image id is #img and your underlying element id is #elem you may do this:
$("#elem").hover(function(e){
$("#img").mouseenter(e);
});
根据 DOM 的设置方式，您可能需要稍微处理一下，这里是文档 http://api.jquery.com/mouseenter/
You might have to mess with this a little depending on how your DOMs are set up, here's the documentation http://api.jquery.com/mouseenter/
相关文章