CSS को गतिशील रूप से बदलें, कुछ CSS नियम काम नहीं करते हैं

निम्नलिखित जेएस कोड मुझे शरीर वर्ग में गतिशील रूप से रंग बदलने के लिए बटनों के साथ अनुमति देता है, यह बहुत अच्छा काम करता है। हालांकि, backgroundColor के अलावा, मैंने एक बटन पर अन्य CSS नियमों का उपयोग करने की कोशिश की है, उदाहरण के लिए color, borderColor, और यह बहुत अच्छी तरह से काम करता है।

१) अगर मैं box-shadow या boxShadow का उपयोग करता हूं तो यह काम नहीं करता है। क्या मैं गलत हूं या सीएसएस नियमों की एक सूची है जिसका मैं उपयोग कर सकता हूं?

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

});