Don't fire onmouseout when mouse moves to something overlaying the element

Question

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)

You'll have to manually calculate with mouse coordinates and the position of `#viewer` — ahren, Feb 28 '13 at 05:42
Yes because it's not a child of the iframe, therefore you can't use something like `mouseenter`/`mouseleave` or playing with the event propagation... — ahren, Feb 28 '13 at 05:48
When you say above do you mean an overlay, or higher up on the screen? — Indigenuity, Feb 28 '13 at 05:53
You could try to set [`pointer-events: none;`](https://developer.mozilla.org/en-US/docs/CSS/pointer-events) for the `#appear_above_viewer`, though it's not cross-browser... — Teemu, Feb 28 '13 at 06:46
@Teemu I do need IE support unfortunately. But thanks for the suggestion — , Feb 28 '13 at 06:51
@DuncanNZ In the legacy event model of the IE there are `event.toElement` and `event.fromElement` properties, quite similar to `relatedTarget`. You could try these with IE. — Teemu, Feb 28 '13 at 06:56

score 0 · Answer 1 · edited May 23 '17 at 11:43

0

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

edited May 23 '17 at 11:43

Community

1
1

answered Feb 28 '13 at 06:51

Indigenuity

9,332
6
39
68

score 0 · Answer 2 · answered Aug 15 '13 at 11:17

0

You can try this.

onmouseout =function(e){
   if ( e && e.preventDefault )
        e.preventDefault();
        e.stopPropagation();
    else
        window.event.cancelBubble = true;
        window.event.returnValue = false;
    return false;
  }

answered Aug 15 '13 at 11:17

Douglas

490
3
8

Don't fire onmouseout when mouse moves to something overlaying the element

2 Answers2