I have a CSS file separate from the main CSS file for a page. Essentially there are three hyperlinks each with their own p tags, one under the other, and each has their own divs for specifying the webkit transition color for when they highlight. The colors all work great until the end of the webkit transition, at which point all three links change color to the color specified in the last class on the CSS (gray). I tried excluding that last class, and sure enough, the final color for all links became the color specified in the new "last class" (blue).
This happens only when I have visited the link, works fine when I clear cookies and don't click on any of the links. So it seems like something with a:visited, but as you can see, I have that covered (I think...).
Here's the CSS:
.orangelink a:link:hover,a:hover,a:visited:hover {
color: #cc7839;
text-decoration:none;
/* font-weight:bold; */
-webkit-transition:color 0.5s ease-in;
-moz-transition:color 0.5s ease-in;
}
.bluelink a:link:hover,a:hover,a:visited:hover {
color: #7290a4;
text-decoration:none;
/* font-weight:bold; */
-webkit-transition:color 0.5s ease-in;
-moz-transition:color 0.5s ease-in;
}
.graylink a:link:hover,a:hover,a:visited:hover {
color: #b0afaf;
text-decoration:none;
-webkit-transition:color 0.5s ease-in;
-moz-transition:color 0.5s ease-in;
}
Seems like I'm missing something small... To be clear, there is no interference from the main CSS file, a isn't defined at all except for the color of hyperlinks when they are inactive.
Copyright Notice：Content Author:「jspinella」，Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/19214746/multiple-divs-for-a-hover-changes-color-at-end-of-webkit-color-transition