CSS颜色变换更改边框颜色

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

通常我知道这段代码应该可以工作，但我认为因为我使用了transition，所以它不能工作。以下是完整的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;

}

你知道为什么这样不行吗？

---

谢谢

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

鼠标悬停属性将允许它在项目不再悬停在其上方后更改回原始代码。此代码是否只转换一次，然后在不将鼠标移离链接的情况下返回原始代码？此外，它是否持续循环？不确定您是否正确理解了问题。它确实会变回原来的颜色，但在过渡期间，边框会变为白色，这是不应该的，因为我从未尝试过改变边框的颜色。这是正确的还是有问题？我正在使用chrome进行测试，在过渡期间边框不会变为白色。您正在使用哪个浏览器进行测试？您已经使用的代码。我只是加入了一些简单的html。我完全使用了你的CSS。但有一件事确实让我困惑，那就是为什么你的转换是在你的普通链接id代码中，而不仅仅是在悬停中？