css - jQuery hover problem due to z-index

Question

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?

Answer 1

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.

For example:

img
{
    pointer-events: none;
}

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

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.

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);
});

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/