Question

In the following example, a mouse hover over each link changes the image:

http://www.prism.gatech.edu/~dm257/sprite.html

The trick is the following line of code:

#home a:hover {
  background: transparent url('sprite.png') 0px -37px no-repeat;
}

The a:hover selector sets the background to a green part of of sprite.png.

Can I do the same thing with a:visited? Make the icon turn green after the user has clicked it?

I changed a:hover to a:visited and nothing happens.

Answer 1

Styling of :visited is currently limited to prevent security risk related to exposing user’s browsing history:

https://developer.mozilla.org/En/CSS/%3Avisited:

Starting in Firefox 4, major limitations to the styles you can apply
using this selector have been introduced. For more information on the
limitations and the motivation for them, see Privacy and the :visited
selector.
The same limitations have been adopted by other browsers, including
Safari 5/4.1 and Chrome 6.