Persist mouseenter/mouseleave on parent element

Question

I have this HTML:

<div id="content">
    <div class='sub_menu a'></div>
    <div class='sub_menu b'></div>
    <div class='sub_menu c'></div>
    <ul>
        <li class='a'>link a</li>
        <li class='b'>link b</li>
        <li class='c'>link c</li>
    </ul>
</div>

$('li').mouseleave(function(e) {
    var cl = $(this).attr('class');
    $(".sub_menu." + cl).show();
}).mouseleave(function() {
    var cl = $(this).attr('class');
    $(".sub_menu." + cl).hide(); //
});

On mouseenter on each <li> the div sub_menu with same class (a, b or c) will show up. I need that when the mouseleaves the <li> but is over the opened div, this div will remain open.

Now when I go with mouse over sub_menu, this will close up. I hope you understand what I'm trying to do!

score 2 · Accepted Answer · answered Apr 19 '12 at 09:05

2

$('li').hover(function() {
   $(".sub_menu").hide();

   var cl = $(this).attr('class');
   $(".sub_menu." + cl).show();
});

Code: http://jsfiddle.net/8y5Zh/1/

answered Apr 19 '12 at 09:05

Samich

29,157
6
68
77

When i go with mouse on opened sub_menu this will hide!! – Ste Apr 19 '12 at 09:07
Ok. now its possible hide sub_menu when i leave
?

Ste

Apr 19 '12 at 09:13

Only this idea here: http://jsfiddle.net/8y5Zh/2/. It handles mouse leave on the parent container. – Samich Apr 19 '12 at 09:33

Persist mouseenter/mouseleave on parent element

1 Answers1