How to Change the Color of Link on Hover using CSS ?

Last Updated : 20 Mar, 2024

Changing the color of a link on hover can provide visual feedback to users, indicating that the link is interactive. It improves the user experience by helping users understand that the link is clickable.

These are the following approaches:

Table of Content

Using CSS pseudo-class
Using CSS Variables
Using Inline CSS

Using CSS pseudo-class

CSS provides the: hover pseudo-class which allows us to specify styles that should apply when the mouse is over an element, such as a link (<a> tag).

Syntax:

selector:hover {
  /* styles to apply on hover */
}

Example: The below code uses: hover pseudo-class to change the Color of the Link on Hovers.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Change Link Color on Hover</title>
    <link rel="stylesheet"
          href="styles.css">
</head>

<body>
    <div class="container">
        <h1>GeeksForGeeks</h1>
        <h2>Changing Link color on Hovers
          using pseudo-class</h2>
        <a href="#">Machine Learning</a><br>
        <a href="#">Data Science</a><br>
        <a href="#">Blockchain</a>

    </div>
</body>

</html>

CSS

/* styles.css */
.container {
    text-align: center;
}

h1 {
    color: green;
}

a {
    color: blue;
    text-decoration: none;
}

a:hover {
    color: green;
    text-decoration: underline;
}

Output:

gfgpsc

Using CSS Variables

In this approach, we're using CSS variables to define the default color of the link and the color it should change to on hover.

Example: The below example uses CSS variables to define a link of color.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <link rel="stylesheet"
          href="styles.css">

</head>

<body>
    <div class="container">
        <h1>GeeksForGeeks</h1>
        <h3>Changing link color Using CSS Variables</h3>
        <a href="#" class="custom-link">Hover over me</a>

    </div>
</body>

</html>

CSS

.container {
    text-align: center;
}

h1 {
    color: green;
}

:root {
    --default-color: blue;
    --hover-color: red;
}

.custom-link {
    color: var(--default-color);
    text-decoration: none;
}

.custom-link:hover {
    color: var(--hover-color);
}

Output:

gfghlnkv

Using Inline CSS

This approach uses inline CSS and HTML event attributes to change the color of a link on hover.

Example: The below example shows how we can add inline CSS to change the link color on hover.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
               initial-scale=1.0">
    <title>Link Color Change on Hover</title>
</head>

<body>

    <div class="container"
         style="text-align: center;">
        <h1 style="color: green;">GeeksForGeeks</h1>
        <h3>Changing link color Using inline CSS</h3>
        <a href="#" 
           onmouseover="this.style.color='green'"
           onmouseout="this.style.color='blue'"
            style="color: blue;">Visit GeeksForGeeks
        </a>

    </div>
</body>

</html>