At least this is what internet browsers think.. or ok, not exactly.
Let me explain:
If you have an element which has onmouseover and onmouseout events, and children inside it, if you enter one of the children, onmouseout of parent element will fire, then the onmouseover of the child, and then again the onmouseout of the parent.
Example:
<body> <div style="width: 500px; height: 500px; background-color: red;" onmouseout="alert( 'leaving parent' );" onmouseover="alert( 'entering parent' );" id="parent"> <div style="width: 100px; height: 100px; background-color: blue;" onmouseover="alert( 'entering child' );" onmouseout="alert( 'leaving child' );" id="child"> </div> </div> </body>
If you enter the parent div, you will get an alert saying: “Entering parent” (obviously). But if you then enter the child-div,
you will get these alerts (consecutively):
“Leaving parent”, “Entering child”, “Entering parent”
The same thing happens if you then leave the child: you will get these alerts:
“Leaving child”, “Leaving parent”, “Entering parent”
Now, suppose that you have a <div> element,
which on mouse-over creates a <form> child and on mouse-out destroys it.
This won’t lead to the result you ‘d expect:
When you mouse-over it, it will create the <form>,
but instantly destroy it because you entered the child.
And then again, as you are not on the child,
you are re-entering the <div> and thus creating the <form> again.
…and so on.
http://www.quirksmode.org/js/events_order.html
I came back to look for this article more than 3 years after I first read it. Thanks