Search code examples
jqueryevent-bubbling

Event bubbling with jQuery's mouseout, prematurely hiding

I'm having a jQuery problem and I can't wrap my mind around what's wrong. I suspect it's something with media bubbling but i'm not sure. I've changed the mouseout listener from foo, plym-flyout, and first.. all seem to hide as soon as the mouse enters.

It works if I listen on a class separate from the menu it works fine. Also I'm not sure if some of the CSS being absolutely positioned has anything to do with this.

Any ideas? http://jsfiddle.net/vrCKU/

<ul class="plym-flyout" style="display: none;">
    <ul class="foo">
        <li class="first"><a href="">My Entries</a></li>
        <li><a href="">I'm Watching</a></li>
        <li><a href="">Leaderboard</a></li>
        <li><a href="">My Tickets</a></li>
        <li><a href="">My Account</a></li>
        <li class="last"><a href="">Refer Friends</a></li>
    </ul>
    <ul class="plym-dropShadow"></ul>
</ul>

-- JS --

$(".hdr-user").click(function () {
    $(".plym-flyout").toggle();
});

$(".foo").mouseout(function () {
    $(".plym-flyout").hide();
});
Solution

  • Use mouseleave instead of mouseout:

    http://jsfiddle.net/txA8r/

    http://api.jquery.com/mouseleave/

    http://api.jquery.com/mouseout/