Javascript Jquery:更改菜单悬停时的不透明度

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

JQuery：

HTML:

CSS:

它的工作方式我想，但我想补充一件事，我不知道如何。 当我将鼠标悬停在站点任意点的菜单栏上时，我想将“不透明度”改回1.0（上、中、下，它必须适用于所有位置） 知道怎么做吗

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

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

JS:

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

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

谢谢你的帮助，请看这里

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

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

首先，

nav

是一个

ul

的类，所以要调用它，需要在它前面加一个

第二，只需添加

！重要

到

.nav:hover{opacity:1！important}

以便覆盖JQ。这是最快的方式…不是最好的方式

代码：

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

}

或。更好的方法是这样做

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

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

CSS:

---

滚动时将类

.opac

添加到

.nav

中，然后在CSS中设置该类的样式。所以不需要那种难看的

！重要信息

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

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

---

就性能而言，我会选择CSS方式。不要过度使用JS动画，而是使用CSS

在OP中包含相关代码，而不仅仅是一个链接让我给你一个这样做的想法。如果您不能自己完成，请再次发布代码。这样做：不要直接在滚动上应用不透明度。在css中创建一个具有新不透明度的类，并在需要的滚动位置应用它。现在，如果您想使用悬停事件，请在悬停方法上应用新的不透明度。因此，这将覆盖您当前的类属性。代码在链接中，我无法对其使用CTRL+k，因为某些原因，它对我不起作用。抱歉，您不需要创建小提琴链接。只要使用这些工具，就可以……完全符合我的要求。即使是最快的方法有时也是最好的。我知道有办法让它“更好”，但这已经足够了。我不知道！重要的元素存在，但现在我知道了。非常感谢你用一种更好的方式来做这件事。你选择。很高兴我能帮忙。别忘了将我的答案评定为已接受的答案；）