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)