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 ch开发者_Python百科anges 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)

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

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