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