Why is onMouseOver event fired when the mouse only moves into an inner element?

Question

When the mouse hovers into the inner element, the mouseOut event for the outer element is fired first, then the mouseOver element for inner element is fired, then the mouseOver element for the inner element is fired last.

Why does this happen? Because the inner element technically is still inside of the outer element, so the mouse doesn't leave the outer element when it moves into the inner element. Is there a way to prevent that?

Full example here: http://jsfiddle.net/pMCeu/4/

score 0 · Answer 1 · edited May 23 '17 at 09:59

0

To avoid this you should use mouseenter and mouseleave instead of mouseover and mouseout.

It is due to event bubbling. take a look at this post for a little more info.

edited May 23 '17 at 09:59

Community

1
1

answered May 16 '11 at 01:00

locrizak

12,192
12
60
80

score 0 · Answer 2 · answered Nov 19 '20 at 14:19

0

Hi the solution above is correct and complete. but you can also use mousemove event

answered Nov 19 '20 at 14:19

doronazu

140
1
6

Why is onMouseOver event fired when the mouse only moves into an inner element?

2 Answers2