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

时间:2013-10-06 22:31:15

标签: css html hyperlink webkit transition

我有一个与主页面CSS文件分开的CSS文件。基本上有三个超链接,每个超链接都有自己的p标签,一个在另一个之下,每个超链接都有自己的div,用于指定高亮显示时的webkit过渡颜色。颜色都很好用,直到webkit过渡结束,此时所有三个链接的颜色都变为CSS上最后一个类中指定的颜色(灰色)。我尝试排除最后一堂课,果然,所有链接的最终颜色都变成了新“最后一堂课”(蓝色)中指定的颜色。

只有当我访问了链接时才会发生这种情况,当我清除cookie并且不点击任何链接时,这种情况正常。因此看起来似乎有一个:访问过,但正如你所看到的,我已经覆盖了(我认为......)。

这是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文件的干扰,除了非活动状态下的超链接颜色之外,根本没有定义。

1 个答案:

答案 0 :(得分:0)

在你的声明中,你只说出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;
}  

这将使灰色表现正确,对其他颜色和宾果游戏也一样。