jquery - 在父元素上保持 mouseenter/mouseleave

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

在每个具有相同类（a、b 或 c）<li> 的 div上的 mouseentersub_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/