javascript - 动态更改 CSS，某些 CSS 规则不起作用

Question

下面的 js 代码允许我使用按钮动态更改 body 类的颜色，效果很好。但是，除了 backgroundColor 之外，我还尝试在按钮上使用其他 CSS 规则，例如 color、borderColor，效果非常好好吧。

1) 如果我使用 box-shadow 或 boxShadow 似乎不起作用。我错了还是有我可以使用的 CSS 规则列表？

2) $('h2').css('backgroundColor', '#000'); 为了在鼠标悬停时改变颜色我尝试了 $('h2: hover').css('backgroundColor', '#ff0000'); 但这不起作用。同样在这种情况下，原因是您不能动态地使用:悬停？还是我错了？

$(document).ready(function () {

    var nightMode = function() {

            $('body').css('backgroundColor', '#000');   

        },
        normalMode = function() {
            $('body').css('backgroundColor', '#fff');

        };

    $("#night-mode").click(function () {
        localStorage.setItem('modalread', 'night-mode');
        nightMode();
    });

    $("#normal-mode").click(function () {
        localStorage.setItem('modalread', 'normal-mode');
        normalMode();
    });

    if (localStorage.getItem('modalread') == 'normal-mode') {
        normalMode();   
    } else if (localStorage.getItem('modalread') == 'night-mode') {
        nightMode();
    }

});

Answer 1

您可以使用您定义的 css 类:

定义一个类:

.fancy-class:hover {
    color: yellow !important;
}

切换颜色运行:

$("h2").addClass("fancy-class");

此 $('h2:hover') 不是有效的类选择器。这就是为什么您的解决方案不起作用的原因。为了使您的代码更易于维护，我通常建议将其与 css 类一起使用