Change CSS dynamically, some CSS rules do not work

Question

The following js code allows me, with buttons, to dynamically change color to the body class, it works great. However, in addition to backgroundColor I have tried to use other CSS rules, for example color, borderColor, on a button, and it works very well.

1) If I use box-shadow or boxShadow does not seem to work. Am I wrong or is there a list of CSS rules I can use?

2) $('h2').css('backgroundColor', '#000'); to get a change of color on mouse over I tried $('h2:hover').css('backgroundColor', '#ff0000'); but this does not work. Also in this case the reason is that dynamically you cannot use: hover? Or am I wrong?

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

});

If I use box-shadow or boxShadow does not seem to work what doesn't work? how do you try to use it? — Bravo
– Bravo, Commented Oct 22, 2019 at 8:01
do not confuse jquery selectors with css selectors. They look similar but they are not the same. for hover jquery has a method called hover() . CHeck it out. — Mihai T
– Mihai T, Commented Oct 22, 2019 at 8:04
see Documentation (api.jquery.com/hover) about hover and change your code — user7270134
– user7270134, Commented Oct 22, 2019 at 8:06

ghovat · Accepted Answer · 2019-10-22 08:06:45Z

2

You can work with css classes that you define:

define a class:

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

With switching the colors run:

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

This $('h2:hover') is not a valid class selector. Thats why your solutions doesnt work. To make your code easier to maintain I would in general recommend for this to work with css classes

answered Oct 22, 2019 at 8:06

ghovat

1,0431 gold badge14 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change CSS dynamically, some CSS rules do not work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related