CODEWITHSUNDEEP
jqueryevent-bubbling
SkinnyG33k
SkinnyG33k

Reputation: 1731

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();
});

Upvotes: 1

Views: 299

Answers (1)

Bogdan
Bogdan

Reputation: 44536

Use mouseleave instead of mouseout:

http://jsfiddle.net/txA8r/

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

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

Upvotes: 2

Related Questions