How to change the styles of an HTML element when the mouse pointer is over or hover over the HTML element?
Published July 23, 2021
To change the CSS style when the mouse is over the HTML elements or hovered, we can use the :hover pseudo class on that HTML element in CSS.
For example, let's say we have an a (anchor) tag like this,
<!-- Anchor tag -->
<a>Hey!</a>We aim to change the text color of the anchor tag to red when the user puts the mouse pointer over the anchor HTML element (aka hovers over the element).
To achieve that we can use the :hover pseudo class on the a element inside the CSS stylesheet like this,
/* Change anchor tag style when the user hovers */
a:hover {
/*
Your CSS Styles that needs to
applied to the element when the user hovers
*/
color: red;
}This will change the color of the anchor HTML element tag to red when the user puts the mouse pointer over the element.
See the above code live in JSBin.
That's all 😃!