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

确实很简单。您错过#以在$( "link-a" )

指示“ID为...的元素”

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

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

我认为你真正想要的是mouseleave事件，而不是mouseout

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

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

演示：Fiddle

鼠标悬停在元素上 - 在父（或其他）元素上做一些/ Mouseout - 撤消一些东西？

3 个答案: