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” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”https://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:
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.