javascript - 嵌套的 addClass 似乎不起作用

Question

https://jsfiddle.net/qco1duyL/

只有当页面一直滚动到顶部时，我才会产生悬停效果。我尝试使用 .css 但它不起作用，所以我尝试改用 addClass。仍然没有用。如果您需要查看我的完整代码，请告诉我，但除了 li 的 html 之外，这就是与它相关的所有内容。

JQuery

$(document).scroll(function() {
    if($(document).scrollTop() === 0) {
    $('header').css("background-color", "rgba(18, 79, 255, 1)");
    $('.gall').show();
    $('li').hover(function() {
        $(this).addClass("hovered");
    } function() {
        $(this).removeClass("hovered");
    });
} else {
    $('header').css("background-color", "rgba(18, 79, 255, .5)");
    $('.gall').hide();

}});

CSS

.hovered {
    text-decoration:none;
    text-shadow: 2px 2px 4px #AB5F1D,
                 2px 2px 2px #D67521,
                 3px 3px 2px #4A2A0F,
                 4px 4px 0px #000;
    color: #FF8B24;
    -webkit-text-stroke: .3px black;
}

Answer 1

我修复了它

$(document).scroll(function() {
    if($(document).scrollTop() === 0) {
    $('header').css("background-color", "rgba(18, 79, 255, 1)");
    $('.gall').show();

} else {
    $('header').css("background-color", "rgba(18, 79, 255, .5)");
    $('.gall').hide();
}});

$('li').hover(function() {
    if($(document).scrollTop() === 0) {
        $(this).toggleClass("hovered");
} else {
    $(this).toggleClass("scrolledHovered");
}});