为什么当鼠标仅移动到内部元素时会触发 onMouseOver 事件？

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/

Answer 1

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.

Answer 2

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