text-decoration in visited and hover not working

liucc · July 17th, 2011, 02:54 PM

Hi-
I am working on example 1 in chapter 8, and I notice that my text-decoration property is not working in css visited or active pseudo-classes of links. The color property works fine, but the visited (a:visited) text-decoration seems to take whatever the link (a:link) text-decoration is and the active (a:active) seems to take whatever the hover (a:link:hover) text-decoration is. Any help is much appreciated. Thank you.

here is my code:

Code:

/* style sheet demonstrating styles of links */

body {background-color:#ffffff;}

a {
  font-family: arial, verdana, sans-serif; 
  font-size:12px;
  font-weight:bold;}

a:link {
  color:#0000ff;
  text-decoration:line-through;}

a:visited {
  color:#333399;
  text-decoration:none;}

a:active {
  color:#008000;
  text-decoration:none;}

a:link:hover {
  background-color:#e9e9e9;
  text-decoration:underline;}

hamza · September 4th, 2011, 03:26 PM

First of all a:link:hover should be a:hover and second you should always place a:active below it's considered good practice and it could cause rendering problems. Hope this solves your problem

mmmason · September 11th, 2011, 02:14 PM

You must to define the anchor pseudo-classes in this order:-

a:link
a:visited
a:hover
a:active

Each one of these pseudo-classes defines itself and the ones that come after it in the list. Because you have hover after active, both will appear the same, i.e. way that [I]hover[I] is defined.