Do not shoot when the mouse moves to something that overlays the item

advertisements

I have an iframe #viewer and an absolutely positioned element #appear_above_viewer that appears above it. I want #appear_above_viewer to fade in when the mouse goes over #viewer, and fade out when the mouse leaves.

So far I have this code:

$("#viewer").hover(
    function(){ $("#appear_above_viewer").animate({ opacity: 1 }, 'slow'); },
    function(){ $("#appear_above_viewer").animate({ opacity: 0 }, 'slow'); }
);

It seems to work, until you hover your mouse over #appear_above_viewer, and it conveniently disappears. I presume this is because an absolutely positioned element is considered something different to the iframe, and it's position on the screen makes no difference.

I want #appear_above_viewer to only disappear when the mouse leaves #viewer, and anything above it entirely. Is this possible?

(I've read other questions about this but none of them seem to work for my situation)


Still not positive I know exactly what behavior is expected, but you likely just need to apply the pointer-events attribute in css set to none on your appear_above_viewer.

Here is a jsFiddle demonstrating something similar to what I think you want.

EDIT

You can use this question for a cross-browser solution:

Click through a DIV to underlying elements