Mouseover and mouseout events are not intuitive. I've made a mockup and demo of a very short snippet that addresses the problem.
The problem is that mouseout events are fired when moving into a child element
and mouseover events are fired when moving from a child element.
This behavior is confusing.
On a mouseover, the relatedTarget property references the node from which the pointer came.
On a mouseout, the relatedTarget property references the node to which the pointer went.
On any event, the scope is the node to which the event is attached.
When the relatedTarget is a not child of the currentTarget, a mouseover event is equivalent to a mouseenter event and a mouseout event is equivalent to a mouseleave event.
Example Usage:
$('nav').observe('mouseover', myMouseEnterCallback.bindAsMouseEnter(scope, arg1, arg2));