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

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 t开发者_JS百科his 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/

---

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.

---

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