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

Question

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

查询：

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

Answer 2

var hov = 1;
var timer; //declare variable named timer accessible to both function below
$("#link-a").mouseover(function(){
// ^ missing # for id-selector
    clearTimeout(timer); //clear timer
    hov = 1;
    $( "#dropdown" ).addClass( "active" );
});

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

---

如果您想将鼠标悬停在#dropdown 内的所有 li 标签上

$("#dropdown li").mouseover(function(){
    clearTimeout(timer); //clear timer
    hov = 1;
    $("#dropdown").addClass( "active" );
});

Answer 3

确实很简单。您缺少 # 以在 $( "link-a" ) 处指示“ID 为.. 的元素”

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