I encountered an issue with my CSS file that is separate from the main stylesheet of a webpage. The problem arises when I have three hyperlinks in consecutive order, each enclosed within their respective p tags and divs for specifying webkit transition colors. While the colors work perfectly during the transition phase, once it completes, all three links change to the color specified in the last class of the CSS (gray). Interestingly, upon removing the last class, the final color for all links shifts to the new "last class" color (blue).
This peculiar behavior only occurs after I have visited the links; everything works fine if I clear cookies and refrain from clicking on any links. It seems like there might be an issue related to a:visited, although I believe I have accounted for that in the code.
Here's a snippet of 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;
}
It appears that there might be a small detail that I am overlooking. Just to clarify, there isn't any interference from the main CSS file, as 'a' is not defined apart from setting the color of inactive hyperlinks.