Question

我有这个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(); //
});

在每个<li>上的mouseenter上，将显示具有相同类别（a，b或c）的div sub_menu。我需要在鼠标移动<li>但是在已打开的div上时，此div将保持打开状态。

现在，当我将鼠标放在sub_menu上时，这将关闭。我希望你明白我要做的事情！

Answer 1

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

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

代码：http://jsfiddle.net/8y5Zh/1/

在父元素上保留mouseenter / mouseleave

1 个答案: