How to modify a CSS pseudo class of an HTML element using JavaScript? [duplicate]

Question

I have a code like this:

const myDiv = document.querySelector("#myDiv");
myDiv.addEventListener("click", fct_Div);

function fct_Div(ev) {
    console.log(ev);
    if (ev.altKey === true) {
        myDiv.style["background-color"] = "blue";
    }
}

with CSS:

        #myDiv {
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }
        #myDiv:hover {
            background-color: lightblue;
        }

I would like to access #myDiv:hover to change the background color.

Surely there is a way to do that?!

Thanks for your time,

Andreï

Guilherme Freitas · Accepted Answer · 2023-10-09 14:59:25Z

0

you can do like:

#myDiv {
        width: 400px;
        height: 400px;
        border: 1px solid black;#myDiv {
        --hover_background_color: lightblue;
    }

    }
    #myDiv:hover {
        background-color: var(--hover_background_color);
    }

then on js

document.querySelector("#myDiv").style.setProperty('--hover_background_color', "blue");

answered Oct 9, 2023 at 14:59

Guilherme Freitas

1

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

Collectives™ on Stack Overflow

How to modify a CSS pseudo class of an HTML element using JavaScript? [duplicate]

Thanks for your time,

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Thanks for your time,

1 Answer 1

Comments

Linked

Related