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