2

I'm trying to get the background image on the 'download' link to change to a green tick once clicked and downloaded. I have applied a:visited, a:hover and a:active, hover is working but somehow a:visited and :active aren't, any ideas why? 

form.download a:visited{
background: url("../images/tick-active.png") no-repeat 10px 5px;       
}

form.download a:hover{
background: url("../images/tick-active.png") no-repeat 10px 5px;
}

form.download a:active{
background: url("../images/tick-active.png") no-repeat 10px 5px;
}

Also, here is a jsfiddle

  • Please create a jsfiddle for your problem. You'll have better chance of getting a solution. – ajc Apr 03 '14 at 21:09

3 Answers3

3

It doesn't work because some browsers see it as privacy violation.

background color should work. I guess background-images are the problem, because you could see which pages your user has visited by tracking the image requests to your server.

See here:

background-image: for :visited links?

Google chrome a:visited background image not working

Community
  • 1
  • 1
boxer santaros
  • 141
  • 3
  • Background color doesn't work either unfortunately, : http://jsfiddle.net/2mbmd/1/ –  Apr 03 '14 at 21:36
  • Weird. There's a good discussion about that in my first link. This is quoted there: http://jsfiddle.net/Yq5GY/1/ – boxer santaros Apr 03 '14 at 21:42
0

Visited and active of the anchor are based on the URL.

If you are sitting AT the URL that the anchor is pointing to then 'active' is the one that is selected.

Same goes for visited URLs and 'visited'

Scott Savage
  • 373
  • 1
  • 4
  • 17
0

It is because of X-Frame-Options options. For JSFiddle it is SAMEORIGIN, and this is why a:visited doesnt work until href is on same origin.

Side note: remember that pseudoclasses works in following order:

  1. link
  2. visited
  3. hover
  4. active