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 😃!