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.
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.