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

时间:2010-08-18 23:01:47

标签: jquery css events hover z-index

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

1 个答案:

答案 0 :(得分:20)

如果您使用的是支持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/