Difference between mousehover and mouseenter in jQuery

1. NO child element

If the matched elements have no child element, both mouseover() and mouseenter() events are work exactly same. See try it yourself below.

2. WITH child element inside

mouseover()

1. When mouse enters the “outerBox”, fire the “outerBox” event.
2. When mouse enters the “innerBox”, fire the “innerBox” event, follow by the “outerBox” event.
3. When mouse enters back to the “outerBox”, fire the “outerBox” event.

mouseenter()

1. When mouse enters the “outerBox”, fire the “outerBox” event.
2. When mouse enters the “innerBox”, fire the “innerBox” event.
3. When mouse enters back to the “outerBox”, no event will fire.