What is the difference between mouseout and mouseleave?

Question

I used both functions.But i don't know what is the difference for both.Can any one please tell me the difference?

Answer 1

If the matched elements have child element, both mouseout() and mouseleave() events are work different in the way of “event bubbling” :

For example, a “outerBox” contains a child element “innerBox”.

<div id="outerBox">OuterBox
    <div id="innerBox">InnerBox
    </div>
</div>

P.S Assure both outerBox and innerBox are attached to certain events.

mouseout()

When mouse enters the “outerBox”, no event will fire.
When mouse leaves the “outerBox”, and enters “innerBox”, fire the “outerBox” event.
When mouse leaves the “innerBox”, and enters “outerBox”, fire the “innerBox” event, follow by the “outerBox” event.
When mouse leaves to the “outerBox”, fire the “outerBox” event.

mouseleave()

When mouse enters the “outerBox”, no event will fire.
When mouse leaves the “outerBox”, and enters “innerBox”, no event will fire.
When mouse leaves the “innerBox”, and enters “outerBox”, fire the “innerBox” event.
When mouse leaves to the “outerBox”, fire the “outerBox” event.