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.

the `a:visited` is when the page as been visited by the user, user `a:active` to change the image when the user clicked on it. — Frederick Marcoux, Mar 03 '12 at 05:53
write a:active instead of a:visited check this http://jsfiddle.net/3rj8g/ — sandeep, Mar 03 '12 at 05:56
see joelin.org/sprite.html, I tried that idea but the icons are not highlighting after clicking on them. — Joe, Mar 03 '12 at 06:37

score 4 · Accepted Answer · answered Mar 06 '12 at 17:14

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.

user110857 · Answer 2 · 2012-04-25T17:33:31.773

0

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/

edited Apr 25 '12 at 17:33

answered Mar 03 '12 at 06:04

user110857

2,023
1
21
33

It didn't seem to work, at http://joelin.org/sprite.html I have `#home a:hover` followed by `#home a:active` and finally `#home a:visited`. View the source and click on the css file. – Joe Mar 03 '12 at 06:37
the best i can say right now is that the visited state is not being passed into the page when i click on one of those links (the links just point back to the same page)...perhaps its being cached? – Joe Mar 03 '12 at 07:25

score 0 · Answer 3 · edited May 23 '17 at 12:03

0

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

Download JS: jQuery.visited.js

See below lins which is related:

edited May 23 '17 at 12:03

Community

1
1

answered Mar 03 '12 at 07:29

w3uiguru

5,864
2
21
25

i tried it and somehow the visited function is never being called...if i change visited to clicked (standard jquery), then i do catch it.. – Joe Mar 03 '12 at 21:17

using a:hover to change the color of an image

3 Answers3

Linked

Related