You can create this effect, by styling the :hover and :active pseudo-classes differently than the other pseudo-classes of the anchor tag. Your links will display in blue color #6A5ACD if the next style is applied:

C# 8.0 and .NET Core 3.0 – Modern Cross-Platform Development: Build applications with C#, .NET Core, Entity Framework Core, ASP.NET Core, and ML.NET using Visual Studio Code, 4th Edition
ASP.NET Core 3 and Angular 9: Full stack web development with .NET Core 3.1 and Angular 9, 3rd Edition
C# in Depth, 4th Edition


a:link, a:visited, a:hover, a:active {

text-decoration: underline;

color: #6A5ACD;

background-color: transparent;



You can make out :hover and :active pseudo-classes different by removing them from the declaration with other pseudo-classes and by giving them their own declaration. You can use the following CSS code to apply an overline in addition to the underline, a background color, and make the text a darker color:



a:link, a:visited {

text-decoration: underline;

color: #6A5ACD;

background-color: transparent;


a:hover, a:active {

text-decoration: underline overline;

color: #191970;

background-color: #C9C3ED;






<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “”>

<html xmlns=”” lang=”en-US”>



How to create a link that changes color on mouseover with CSS


<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />

<link rel=”stylesheet” type=”text/css” href=”test.css” />




<li><a href=”#”>Link One</a></li>

<li><a href=”#”>Link two</a></li>

<li><a href=”#”>Link three</a></li>

<li><a href=”#”>Link four</a></li>





Result is:

Changing of color on mouseover with CSS

Changing of color on mouseover with CSS

Important note:

The link pseudo-classes should be declared in the following order: link, visited, hover, active. If they aren’t, you may find that they don’t work as you intended.