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");
    }   
});

Thansk的帮助

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

Answer 2

更改CSS中 .nav：hover 规则中的不透明度值：

.nav:hover{
    opacity: 1.0 !important;
}

我会在性能方面选择CSS方式。不要过度使用JS动画并改用CSS。