How to change link color on hover in CSS?

In this article, we will learn how to change link color on hover in CSS? Here, we are creating a CSS to we can change the look of links when they are hovered, i.e., user places his mouse over it.
Submitted by Abhishek Pathak, on November 08, 2017

Links are common in any web page. The links connected to each other gives the name HyperText to HTML. Today, in every webpage you'll find link that links to another page, another website or url. Using the CSS, we can change the look of links when they are hovered, i.e., user places his mouse over it.

It can be useful to differentiate between the various types of links, such as link to wikipedia in different color and link to a website in different color. Let's define markup for it.

Code - HTML

<a> Normal Link </a>
<a class="special"> Cool Link </a>

In this markup code, we have two links. A normal link inside a tag without any class applied to it and other a tag with special class applied to it. We will use this class selector to select this element in CSS.

Code - CSS

a {
	font-size: 16px;
	font-family: serif;
	color: black;
}
.special:hover {
	color: red;
}

We first define some basic properties like font and color that are default for every a element. It will target all the link tags with or without any special class. In order to differentiate the special link from other link, we have to apply property on the .special element using a built-in CSS pseudo class.

The :hover pseudo class targets the element whenever the mouse is hovered over it and applies the CSS properties on it. In our case, we have targeted the .special element and when user will hover mouse over it, the color of the link element will change to red color.

Here is a demo,

DEMO

HTML with CSS

<!DOCTYPE html>
<html>
<head>
    <title>JS Bin</title>
    <style>
        a {
        	font-size: 16px;
        	font-family: serif;
        	color: black;
        }
        .special:hover {
        	color: red;
        }
    </style>
</head>
<body>
    <a> Normal Link </a>
    <a class="special"> Cool Link </a>
</body>
</html>

Output

This way, we can change the link color on hover. If you like the article, please share your comments below.

CSS Tutorial & Examples »

A Complete Guide to CSS Flexbox

Style alternate rows of a table with CSS

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples