Question

I had the a:hover mechanism working until I implemented the :active, :visited and :link methods to prevent the link from changing colour upon click etc, please can you tell me where I am going wrong?

#header #navigation #textContainer h2 a:hover {
    color: #696969;
}

#header #navigation #textContainer h2 a:visited {
    color: #b3b3b3;
}

#header #navigation #textContainer h2 a:active {
    color: #b3b3b3;
}

#header #navigation #textContainer h2 a:link {
    color: #b3b3b3;
}

Answer 1

You have your order of pseudo-classes completely mixed up.

The order is :link, :visited, :hover, :active (also known by the mnemonic “LoVe-HAte”) See the spec.

#header #navigation #textContainer h2 a:link {
    color: #b3b3b3;    
}

#header #navigation #textContainer h2 a:visited {
    color: #b3b3b3;
}

#header #navigation #textContainer h2 a:hover {
    color: #696969;
}

#header #navigation #textContainer h2 a:active {
    color: #b3b3b3;
}