javascript - 如何为菜单栏添加悬停效果以更改滚动状态？

Question

我有一个固定在顶部的菜单，在它通过 var b = $(".brand-box") 之后的某个时刻，它会改变其外观。所以，我的菜单有两种状态。它们都需要不同的悬停状态。当我尝试实现它们时，一切都很完美。我该怎么做？

我尝试这样做:

$(document).ready(function() {
    var a = $(".nav-mobile");
    var b = $(".brand-box");
    var c = $(".menu_item");
    var d = $(".facebook-top");
    var e = $(".vk-top");
    var f = $(".menu-item-facebook");
    var g = $(".menu-item-vk");
    var posup = b.position();
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();

        if (windowpos >= posup.top) {
            a.addClass("nav-mobile-black");
            c.addClass("menu-item-black");
            d.addClass("facebook-top-black");
            e.addClass("vk-top-black");
            f.addClass("menu-item-facebook-black");
            g.addClass("menu-item-vk-black");
            var indicator = false;

        } else {
            a.removeClass("nav-mobile-black");
            c.removeClass("menu-item-black");
            d.removeClass("facebook-top-black");
            e.removeClass("vk-top-black");
            f.removeClass("menu-item-facebook-black");
            g.removeClass("menu-item-vk-black");
            var indicator = true;
        }
        $(".menu_item").mouseover(function(){
            if (indicator) {
            $(this).addClass("menu_item-black-hover");
            }
            else {
            $(this).addClass("menu_item-hover");
            }
        });

        $(".menu_item").mouseout(function(){
            if (indicator==false) {
            $(this).removeClass("menu_item-black-hover");
            }
            else {
            $(this).removeClass("menu_item-hover");
            }
        });

    });
});

这个我也试过了。没成功

//$(".menu_item").mouseover(function(){
//    var that = this;
//    var z = $(".brand-box");
//    var pos = z.position();
//    $(window).scroll(function() {
//      var windowpos = $(window).scrollTop();
//        
//        if (windowpos >= pos.top) {
//           

Answer 1

您应该使用纯 CSS 实现悬停状态，而不是添加类来模拟悬停。就像这样:

.myClass:hover {
  /* styles */
}

但是要直接回答您的问题，如果您移动 $(".menu_item").mouseover 和 $(".menu_item").mouseout ，这应该可以工作函数到你的 if 语句中。