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.
