CODEWITHSUNDEEP
htmlcss
user1679857
user1679857

Reputation:

CSS a:visited background image not applying?

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

Upvotes: 2

Views: 508

Answers (3)

user1180790
user1180790

Reputation:

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

Upvotes: 0

boxer santaros
boxer santaros

Reputation: 141

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

Upvotes: 3

Scott Savage
Scott Savage

Reputation: 373

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'

Upvotes: 0

Related Questions