Changing Font Color of a Link on Hover Using CSS

Changing the font color of a link on hover enhances user experience and provides visual feedback when users interact with links. Using the CSS :hover pseudo-class, you can modify the color of a hyperlink when a user hovers over it. This technique is commonly used in navigation menus, buttons, and interactive web elements.

You can use the :hover pseudo-class to change the color of links (<a> tags) when a user hovers over them. Below is the basic CSS code to achieve this:

</>
Copy
/* Change link color on hover */
a:hover {
  color: red;
}

Examples

Example 1. Changing Link Color to Red on Hover

In this example, we change the link color to red when the user hovers over it.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    a {
      color: blue;
    }

    a:hover {
      color: red;
    }
  </style>
</head>
<body>
  <p><a href="https://www.example.com">Hover Over Me</a></p>
</body>
</html>

Output:

Example 2. Changing Link Color and Font Style on Hover

In this example, we change both the font color and font style when the user hovers over the link.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    a {
      color: green;
    }

    a:hover {
      color: orange;
      font-style: italic;
    }
  </style>
</head>
<body>
  <p><a href="https://www.example.com">Hover Over Me</a></p>
</body>
</html>

Output:

Example 3. Changing Link Color for a Specific Section on Hover

Sometimes, you may want to change the hover color only for links within a specific section. You can achieve this by targeting links inside a specific class.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    a {
      color: blue;
    }

    .custom-links a:hover {
      color: purple;
    }
  </style>
</head>
<body>
  <div class="custom-links">
    <p><a href="https://www.example.com">Hover Over Me (Custom Section)</a></p>
  </div>

  <p><a href="https://www.example.com">Regular Hover Link</a></p>
</body>
</html>

Conclusion

Using the :hover pseudo-class to change the font color of links improves user experience and enhances website interactivity. You can customize the hover effect to include different colors, font styles, or target specific sections.