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

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:

 

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:

 

Test.css

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;

}

 

 

Test.html

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>

<head>

<title>

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

</title>

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

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

</head>

<body>

<ul>

<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>

</ul>

</body>

</html>

 

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.