jQuery悬停问题，由于z-index [英] jQuery hover problem due to z-index

问题描述

我想使用jQuery为一个元素触发一个悬停事件，但我有一个半透明的png定位在元素上使用z-index。有没有办法告诉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/

这篇关于jQuery悬停问题，由于z-index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！