using a:hover to change the color of an image

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.

Answer 2

You absolutely can. Of course, the :visited state will only be visible upon the next load of the page. Browsers are able to determine whether or not a page has been previously accessed via header information.

Here's a jsFiddle that demonstrates the proper declaration order with helpful comments:

• http://jsfiddle.net/fmYdD/4/

Answer 3

you can accomplish with the help of this plugin - Visited links plugin

Download JS: jQuery.visited.js

See below lins which is related:

• set a:visited style with javascript or jquery
• Setting CSS pseudo-class rules from JavaScript