动态更改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类。