【问题标题】:Multiple divs for a hover, changes color at end of webkit color transition用于悬停的多个 div,在 webkit 颜色过渡结束时更改颜色
【发布时间】:2013-10-06 22:31:14
【问题描述】:

我有一个独立于页面主 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。

【问题讨论】:

    标签: css html hyperlink webkit transition


    【解决方案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;
    }  
    

    这将使灰色表现正确,对其他颜色和宾果执行相同操作。

    【讨论】:

    • 做到了,谢谢,非常感谢!我想这是我不知道自己在做什么的简单案例:P
    猜你喜欢
    • 2016-12-21
    • 1970-01-01
    • 2014-07-14
    • 2016-05-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多