Your :visited and :actived pseudo class wont be visible within jsFiddle since the href="http://test". So, you need to visit the page test to see :visited in action .. AND you need to be on test page to see :active in action.
Here i made a fiddle for you
You can see where .css differs
.topleftbox:hover {
background: blue;
}
.topleftbox:visited {
background: yellow;
}
.topleftbox:visited:hover {
background: pink;
}
.topleftbox:active {
background: green;
}
Also, you should give a check to the ORDER in witch you define your styling.
a:link { color: red } /* unvisited links */
a:visited { color: > blue } /* visited links */
a:hover { color: yellow } /* user hovers */
a:active { color: lime } /* active links */
Note that the A:hover must be placed after the A:link and A:visited
rules, since otherwise the cascading rules will hide the 'color'
property of the A:hover rule. Similarly, because A:active is placed
after A:hover, the active color (lime) will apply when the user both
activates and hovers over the A element.
An example of combining dynamic pseudo-classes:
a:focus { background: yellow } a:focus:hover { background: white }
The last selector matches A elements that are in pseudo-class :focus
and in pseudo-class :hover.