How to change :hover CSS properties with JavaScript?

Spread the love

Sometimes, we want to change :hover CSS properties with JavaScript.

In this article, we’ll look at how to change :hover CSS properties with JavaScript.

How to change :hover CSS properties with JavaScript?

To change :hover CSS properties with JavaScript, we set the styles on mouse over.

For instance, we write

<div id="mydiv">foo</div>

to add a div.

Then we write

document.getElementById("mydiv").onmouseover = (e) => {
  e.target.style.backgroundColor = "blue";
};

to select the div with getElementById.

And then we set its onmouseover property to a function that sets the backgroundColor of the div to blue when we hover over the div.

Conclusion

To change :hover CSS properties with JavaScript, we set the styles on mouse over.

Leave a Reply

Your email address will not be published. Required fields are marked *