How to change the styles of an HTML element when the mouse pointer is over or hover over the HTML element?

Originally posted here!

To change the CSS style when the mouse is over the HTML elements or hovered, we can use the :hover pseudo-selector 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-selector 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 😃!

Feel free to share if you found this useful 😃.

---