DEV Community

Cover image for How to change the styles of an HTML element when the mouse pointer is over or hover over the HTML element?
MELVIN GEORGE
MELVIN GEORGE

Posted on • Originally published at melvingeorge.me

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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


Discussion (0)