Javascript 如何为更改滚动状态的菜单栏添加悬停效果？

我有一个固定在顶部的菜单，在它通过

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) {
//           

---

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

.myClass:hover {
  /* styles */
}

---

但是为了直接回答您的问题，如果您将

$（“.menu\u item”）.mouseover

和

$（“.menu\u item”）.mouseout

函数移到if语句中，这应该可以起作用

是的，但是纯样式不适用于我的另一个状态——滚动过某些元素后出现的状态。你怎么想？为什么？你说的悬停是对的。这要简单得多。我找到了让它工作的方法。@Valentin-谢谢你想通过编辑来改进问题。然而，我相信这里有一个共识，即反勾号仅用于代码和控制台输入/输出。通用技术术语（如“CSS”）不需要代码格式。