Question

所以我的网站上有这个按钮，有灰色背景，红色边框和红色文字，我想要它，当你将鼠标悬停在它上面时，背景变成红色，文字变成白色，边框不会改变。当你将鼠标从按钮上移开时，边框颜色变为白色，然后一旦过渡结束，它就会迅速变回红色。

通常我知道这段代码应该可行，但我认为因为我使用转换它不会。这是完整的CSS代码：

#leftWebsiteTitle a:link{
    display:block;
    width:200px;
    padding:7px 10px 7px 14px;
    margin:37px;

    font-family:graduate;
    color:#C83434;  
    border:3px solid #C83434;
    background:transparent;
    text-decoration:none;
    font-size:44px;
    -webkit-transition: color 300ms, background 300ms;
    -moz-transition: color 300ms, background 300ms;
    -o-transition: color 300ms, background 300ms;
    -ms-transition: color 300ms, background 300ms;
    transition: color 300ms, background 300ms;

}
#leftWebsiteTitle a:visited{
    color:#C83434;  
    text-decoration:none;
}

#leftWebsiteTitle a:hover{
    color:#FFF;
    border:3px solid #C83434;
    background:#C83434;
    text-decoration:none;
    -webkit-transition: color 100ms, background 100ms;
    -moz-transition: color 100ms, background 100ms;
    -o-transition: color 100ms, background 100ms;
    -ms-transition: color 100ms, background 100ms;
    transition: color 100ms, background 100ms;

}

为什么这不起作用的任何想法？谢谢！

Answer 1

所以我发现问题不在上面提供的代码中。我已将转换应用于包含该按钮的div，这就是干扰此转换的内容。一旦我删除它，它工作正常。

CSS颜色转换会更改边框颜色

1 个答案: