javascript event inheritance

Question

I'm using a list to build a simple nav menu, that shows when you hover and hides when you leave it. I want the menu (ul) to appear when the a tag is hovered, and only disappear when mousing out of the entire div. However, the code below is hitting the mouseout when every tag is moused out, not just the div tag. I assume each child tag is inheriting the event, but how do I get around that?

<div id="Div1" onmouseout="alert('out')">
    <div id="header">
        <a href="#" onmouseover="alert('over')">Show Others</a>
    </div>
    <ul id="menu">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

Answer 1

Mouse over/out events can act a bit weird, and the worst part of it all is that it varies between browsers. What I recommend you do is to use a JavaScript framework such as jQuery, which has cross-browser handling of mouseover and mouseout. Even better, it has mouseenter and mouseleave, which are special events that are sure to only trigger once per mouse entering/leaving of an element, even if it has child elements.

See demo of mouseenter/mouseleave events in jQuery.