a:hover, a:active text-decoration: underline overline;
<!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>Chapter 2</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
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;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Big Widgets</a></li>
<li><a href="#">Small Widgets</a></li>
<li><a href="#">Short Widgets</a></li>
<li><a href="#">Tall Widgets</a></li>
</ul>
</body>
</html>
Related examples in the same category