css - 悬停的多个 div，在 webkit 颜色过渡结束时更改颜色

Question

我有一个独立于页面主 CSS 文件的 CSS 文件。基本上有三个超链接，每个都有自己的 p 标签，一个在另一个下面，每个都有自己的 div，用于指定突出显示时的 webkit 过渡颜色。在 webkit 过渡结束之前，所有颜色都很好用，此时所有三个链接都将颜色更改为 CSS 上最后一个类中指定的颜色(灰色)。我尝试排除最后一类，果然，所有链接的最终颜色都变成了新的“最后一类”(蓝色)中指定的颜色。

只有当我访问该链接时才会发生这种情况，当我清除 cookie 并且不单击任何链接时工作正常。所以它看起来像是带有 a:visited 的内容，但如您所见，我已经涵盖了(我认为...)。

这是 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;

}  

似乎我遗漏了一些小东西......需要明确的是，主 CSS 文件没有干扰，除了超链接处于非事件状态时的颜色外，a 根本没有定义。

Answer 1

在你的声明中，你只声明 a:link:hover... 的父类

.graylink   a:link:hover,
.graylink   a:hover,
.graylink   a:visited:hover{
    color:  #b0afaf;
    text-decoration:none;
    -webkit-transition:color 0.5s ease-in; 
    -moz-transition:color 0.5s ease-in;
}  

这将使灰色行为正确，对其他颜色和宾果游戏也这样做。