CODEWITHSUNDEEP
google-chromecsscss-transitions
Abraham
Abraham

Reputation: 20686

Strange css3 transition behavior with a:visited

I just discovered a strange CSS3 transition problem with a:hover and a:visited in Google Chrome. (demo) The link should have an orange background and after having been visited it should be blue. When you hover over, the link should grow wider. However, when you hover over after visiting, the link changes to orange during the transition and then back to blue. I want it to stay blue during the transition, because, well, the link is still :visited, right?
Any help, suggestions, or anything gladly appreciated! (No jQuery, please - CSS only)

Upvotes: 4

Views: 1220

Answers (2)

Oscar Broman
Oscar Broman

Reputation: 1127

This is related to privacy, for example Firefox won't support transitions for them: https://developer.mozilla.org/en/CSS/Privacy_and_the_:visited_selector

Upvotes: 3

Michael Jank
Michael Jank

Reputation: 56

Adding this code:

a:visited a:hover{
  width: 17em;
  background: #B2CDE0;
}

results (at least in Chromium) that the background color at the end of the effect is blue, but not during the ease-out. seems like a webkit bug to me

Upvotes: 4

Related Questions