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>

Blixt · Accepted Answer · 2009-07-13 15:34:36Z

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.

edited Jul 13, 2009 at 15:34

answered Jul 13, 2009 at 15:15

Blixt

50.3k13 gold badges128 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript event inheritance

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related