jquery - 鼠标悬停在元素上 - 在父(或其他)元素上做某事/鼠标悬停 - 撤消某事？

Question

我确定我在这里遗漏了一些明显的东西......我在一个菜单周围放置了一个包装器，当其中一个菜单项悬停时，我想下拉该菜单，我还希望它仅在鼠标离开下拉区域之前保持打开状态，而不是在鼠标离开菜单项时保持打开状态。

JQUERY:

var hov = 1;
$( "#link-a" ).mouseover(function(){
    clearTimeout();
    hov = 1;
    $( "#dropdown" ).addClass( "active" );
});

$( "#dropdown" ).mouseout(function(){
    hov = 0;
    setTimeout(function(){
        if(hov == 0){
            $( this ).removeClass( "active" );
        }
    }, 300);
}); 

HTML:

<div id="dropdown">
    <ul>
        <li id="link-a">Link A</li>
        <li id="link-b">Link B</li>
        <li id="link-c">Link C</li>
    </ul>            
</div>

CSS:

#dropdown {
    height: 0;
}
#dropdown.active {
    height: 600px;
}

Answer 1

我想你真正要找的是mouseleave事件而不是 mouseout

jQuery(function () {
    $("#link-a").mouseover(function () {
        $("#dropdown").addClass("active");
    });

    $("#dropdown").mouseleave(function () {
        $(this).removeClass("active");
    });
})

演示:Fiddle