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 the other browsers still haven’t copied this brilliant Microsoft invention. Come on, guys!

Method or property IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3 Saf 3.0 Win Saf 3.1 Win iPhone 3G Opera 9.26 Opera 9.51 Konqueror 3.5.7
On the window
 No Yes Yes Alternative Minimal Yes

Are these events available on the window?

  • Opera allows registration on the window only when you use attachEvent.
On the document
 Yes Yes Yes Alternative Yes Yes

Are these events available on the document?
On any element
 Yes Almost Yes Buggy Yes Yes Alternative Incomplete 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.
  • IE8b1 seems to consider the empty padding of my nested test element a part of the document, though the border is counted as part of the div element. Therefore, moving into the div first fires a mouseover event on the div, and then a mouseout event on the div and a mouseover event on the document. These last two events are incorrect.
  • Opera has serious problems with addEventListener in the capturing phase. In Opera 9.26 the events do not fire when you enter the element you registered the event on, though entering and leaving nested elements fires the events correctly. Opera 9.5b has the same problem, but now only when you enter the element you registered the event on from the top or bottom.
Method or property IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3 Saf 3.0 Win Saf 3.1 Win iPhone 3G Opera 9.26 Opera 9.51 Konqueror 3.5.7
Event bubbling
 Yes Yes Yes Almost Yes

The events should bubble up. (In fact they shouldn’t, because the bubbling effect is exactly what makes these events so hard to use, but they do and according to timeless tradition they should.)

  • When using attachEvent registration, Opera fires the event on the window before the event on the document. (The event isn’t available on the window in any other registration.)
Cancel bubble
 Yes Yes Yes Yes Yes

iPhone

On the iPhone these events fire when the user focus moves from one element to another. When an element gains the focus it fires mouseover, when it loses the focus it fires mouseout.

Related events

Method or property IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3 Saf 3.0 Win Saf 3.1 Win iPhone 3G Opera 9.26 Opera 9.51 Konqueror 3.5.7
mouseenter

When the mouse enters an element, but it doesn’t bubble.

MUCH more useful than mouseover. Come on, Mozilla. Come on, Safari. Come on, Opera. Come on, Konqueror.

Test page.

 Yes No No No No

The other browsers should implement these events as soon as possible.

(Yes, I know I’m shouting, but I’ve been saying this since 2003 and nobody has ever paid my message the least attention.)

Mouseover and mouseout also fire when the user mouses over or out of a child element of the element you registered the events on. Mouseenter and mouseleave don’t. Thus, they are the true equivalent of CSS :hover.

Once these events are supported by all browsers, creating dropdown menus will become a walk in the park. It’s Firefox’s, Safari’s and Opera’s fault that we still have to waste hours and hours on carefully distinguishing between important and unimportant mouseover and mouseout events. If we just had mouseenter and mouseleave, all our problems would be solved.
mouseleave

When the mouse leaves an element, but it doesn’t bubble.

MUCH more useful than mouseout.

Test page.

 Yes No No No No

See mouseenter remarks.
Method or property IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3 Saf 3.0 Win Saf 3.1 Win iPhone 3G Opera 9.26 Opera 9.51 Konqueror 3.5.7