Timing of events when the mouse moves through overlapping or nested areas

Question

When I have nested objects, the timing of events that occur when a mouse passes though is very counterintuitive and complex. Can someone explain the rules for the timing?

For example, when I have nested divs like the following:

where each div has the onmouseover and onmouseout properties so that they fire events, they do so in the following order:

• When the mouse moves 1 --> 2

  mouseover 2

• When the mouse moves 2 --> 3

  mouseout 2
  mouseover 3
  mouseover 2

• When the mouse moves 3 --> 4

  mouseout 3
  mouseout 2
  mouseover 4
  mouseover 2
  mouseover 3

• When the mouse moves 4 --> 5

  mouseout 2
  mouseover 5
  mouseout 3
  mouseover 4
  mouseout 4
  mouseover 3
  mouseover 2

• When the mouse moves 5 --> 4

  mouseout 5
  mouseout 4
  mouseover 3
  mouseover 4
  mouseout 2
  mouseout 3
  mouseover 2

• When the mouse moves 4 --> 3

  mouseout 4
  mouseover 3
  mouseover 2
  mouseout 3
  mouseout 2

• When the mouse moves 3 --> 2

  mouseout 3
  mouseout 2
  mouseover 2

• When the mouse moves 2 --> 1

  mouseout 2

I am particularly using Firefox 9.0. Please let me know if there is difference between webbrowsers.

Answer 1

I highly recommend you to use mouseenter and mouseleave events. Mouseover and mouseout are tricky when using nested elements. From docs:

Similar to mouseover , it differs in that it doesn't bubble and that it isn't sent until the pointer has moved from its physical space and the one of all its descendants.

Also I recommend using and I use most of times jQuery Hover helper which binds those non-buggy-bubbling events.