Why isn’t my CSS class working in hover or active state of a link?

One of the reasons your active or hover state isn’t working is because there is actually a particular order for pseudo-classes (link, visited, hover, active) in CSS. If they aren’t in the proper order, they won’t work.

This seems to be the shortest way to put it:

.footer a:link { text-decoration:none; color:#737373;}
.footer a:visited{ text-decoration:none; color:#737373;}
.footer a:hover{ text-decoration:underline; color:#0095e0;}
.footer a:active{ text-decoration:none; color:#FFFFFF;}

Note: a:hover MUST come after a:link & a:visited.

Note: a:active MUST come after a:hover.

It’s kind of a bummer for pseudo-classes to work this way because it seems like more code than it needs to be. I typically only use the link and the hover, so even though I define active link it doesn’t do anything and I only have two lines of CSS.

.footer a:link, .footer a:active, .footer a:visited {text-decoration:none; color:#737373;}
.footer a:hover{ text-decoration:underline; color:#0095e0;}

Feel free to comment if you have a better method.