CSS 颜色变换改变边框颜色

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，这就是干扰此过渡的原因。一旦我删除它，它就可以正常工作。