mouseover and mouseout

Test page.

Events overview page.

The mouseover event fires when the user moves the mouse onto an element. The mouseout event fires when the user moves the mouse out of an element. Unfortunately these events bubble up.

mouseover
Fires when the user moves the mouse over the element you registered the event on or one of its descendants.
mouseout
Fires when the user moves the mouse out of the element you registered the event on or one of its descendants.
mouseenter and mouseleave
Similar to mouseover and mouseout, but these events do not bubble.

In general you want to use mouseenter and mouseleave instead of mouseover and mouseout. Unfortunately Firefox, Chrome, and Safari still haven’t copied this brilliant Microsoft invention, that has even made it to the spec. Come on, guys!

Test IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 7.0 Win FF 6.1 Mac Saf 5.1 Win Saf 5.1 Mac Chrome 14 Win Chrome 13 Mac Opera 11.51 Win Opera 11.51 Mac
On the window
No Yes Yes Yes Yes Yes

Are these events available on the window?

    [an error occurred while processing this directive]
On the document
Yes Yes Yes Yes Yes

Are these events available on the document?

On any element
Yes Almost Yes Yes Yes Yes Yes

Are these events available on any element, including form fields and links?

  • In IE6 there’s a bug with the padding-bottom and border-bottom of elements (such as my nested test). See this bug report.
Event bubbling
for mouseover and mouseout
Yes Yes Yes Yes Yes

The mouseover and mouseout events should bubble up.

Cancel bubble
Yes Yes Yes Yes Yes
Test IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 7.0 Win FF 6.1 Mac Saf 5.1 Win Saf 5.1 Mac Chrome 14 Win Chrome 13 Mac Opera 11.51 Win Opera 11.51 Mac
mouseenter and mouseleave
Yes No No No Yes

Are these events supported? They’re in the spec nowadays.

Event order
  1. mouseover
  2. mouseenter
  3. mouseout
  4. mouseleave
Yes Untestable Untestable Untestable Yes

Is the event order correct?

Event bubbling
for mouseenter and mouseleave “No” is the correct answer
No Untestable Untestable Untestable No

The mouseenter and mouseleave events should not bubble up. That’s the whole point of having them.

Test IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 7.0 Win FF 6.1 Mac Saf 5.1 Win Saf 5.1 Mac Chrome 14 Win Chrome 13 Mac Opera 11.51 Win Opera 11.51 Mac