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/

Answer 2

If you just wish to do something to the covered element when hovering over it, such as changing its size and colour via JavaScript, then you can just attach the hover event to the png and apply the changes to the element instead.

$('#pngID').hover(function(e) {
    //do whatever you want here.
});

Please note that you can't manually trigger events. Therefore, you can't do something like "When the mouse hovers over an element, fire the hover event for another element".