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语句中，这应该会有效。

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

1 个答案: