javascript - Jquery:在菜单悬停时更改不透明度

Question

我有一个固定的菜单，我想在向下滚动和向上滚动时更改不透明度，所以我做了这个:

JQuery:https://paste.ee/p/Ew9UW

HTML:https://paste.ee/p/5PTOE

CSS:https://paste.ee/p/RCtLj

它按我想要的方式工作，但我想添加一件事，但我不知道如何添加。当我将鼠标悬停在网站任何位置的菜单栏上时，我想将不透明度更改回 1.0(顶部中间底部，它必须在任何地方都有效)知道怎么做吗？

Fiddle example

JS :

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 70) {
        $("nav").css("opacity", "0.2");
    }
    else {
        $("nav").css("opacity", "1");
    }   
});

谢谢你的帮助

Answer 1

看这里 jsfiddle

首先，nav 是ul 的一个类，所以要调用它需要在它前面放一个. .nav

其次，只需将 !important 添加到 .nav:hover{opacity:1!important} 即可覆盖 JQ。这是最快的方式...不是最好的方式

代码:

.nav:hover {
    opacity: 1!important;
    transition: 0.01s;
    background-color: #111;
    transition: 0.3s;

}

或 。一个更好的方法是像这样 jsfiddle

$(window).scroll(function() {    
var scroll = $(window).scrollTop();

    if (scroll >= 70) {
        $(".nav").addClass("opac");
    }
    else {
        $(".nav").removeClass("opac")
    }   
});

CSS:

.nav.opac {opacity:0.2}
.nav.opac:hover { opacity:1;}

在滚动时将 .opac 类添加到 .nav 中，然后在 CSS 中设置该类的样式。所以不需要那个丑陋的 !important