How to Change Link Color on Hover using CSS?

In most of the browsers, an underline is added to the links when we hover over them. But the color of the link still remains the same which is blue by default for most browsers.

However, you might sometimes want to change the color of the link as well while hovering over it. This can be easily done with the help of the :hover pseudo-class selector.

The :hover selector is used to add styles to an element only when the user hovers the mouse pointer over it.

The following example changes the color of the link to red as soon as you hover over it:

Example:

a:hover{
   color: red;
}

Here is one more example which changes the link color to red but only for those links which contain a target="_blank" attribute.

Example:

a[target="_blank"]:hover{
   color: red;
}

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.