javascript - Jquery 悬停停止脚本

Question

我有这个脚本:

$(document).ready(function () {
    var $navToggle = $('.nav-toggle');
    $(".navbtn").click(function () {
        if ($navToggle.hasClass('active')) {
            $('#menu').multilevelpushmenu('collapse');
            $navToggle.removeClass('active');
            $(this).addClass('active');
        }
        else {
            $('#menu').multilevelpushmenu('expand');
            $navToggle.addClass('active');
            $(this).removeClass('active');
        }
    });

    $(".navbtn").hover(function () {
        $('.nav-toggle').addClass('hover');
    });
});

这很好用，但是悬停不完整，因为每当我向它添加 removeClass 行时，它就会停止工作？像这样:

$(".navbtn").hover(function () {
    $('.nav-toggle').addClass('hover');
    $('.nav-toggle').removeClass('hover');
});

请有人帮忙，我只是想重置悬停类。

Answer 1

您可以调用.hover with two arguments , 第一个参数用于鼠标进入回调，第二个参数用于鼠标离开

$(".navbtn").hover(function () {
    $('.nav-toggle').addClass('hover');
},function(){
    $('.nav-toggle').removeClass('hover');
});

演示

$(".navbtn").hover(function () {
        $('.nav-toggle').addClass('hover');
    },function(){
        $('.nav-toggle').removeClass('hover');
    });

.nav-toggle {
   background:#FFF;  
   transition:all 1s;
}

.nav-toggle.hover {
   background:#FF0;
   color:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="navbtn">My Nav</div>

<div class="nav-toggle">Toggle</div>

请注意，如果您要触发 css 过渡的元素与悬停元素有某种关系，您可以只使用 css。因此，如果例如 .nav-toggle 是 .navbtn 的 sibling 或 child ，您可以使用 :hover psuedo 类

.navbtn:hover .nav-toggle {
   background:#FF0;
}

CSS 演示

假设 .nav-toggle 是 .navbtn 的兄弟

.nav-toggle {
   background:#FFF;  
   transition:all 1s;
}

.navbtn:hover ~ .nav-toggle {
   background:#FF0;
   color:black;
}

<div class="navbtn">My Nav</div>
<div class="nav-toggle">Toggle</div>