边框颜色转换css3错误

我正在尝试在我的网站上的边界颜色属性上进行转换，但是我有一个小错误，我不知道他来自哪里。边框颜色转换css3错误

当我的鼠标在按钮/链接上时，边框变为蓝色，然后过渡到来。我在firefox/chrome/opera上试过这段代码，这个问题出现在所有这些问题上，所以这可能是我的错误。

你可以看到有这个问题：提前http://jsfiddle.net/u3Ahk/15/

.bouton a { 
    transition: background-color 1s, border-color 1s; 
    padding: 5px 7px 8px 7px; 
    text-decoration: none; 
}

谢谢！

来源

2013-05-27 Off

Updated fiddle.

明确规定的透明边框中的链接的正常状态：

.bouton a { 
    transition: background-color 1s, border-color 1s; 
    padding: 5px 7px 8px 7px; 
    text-decoration: none; 
    border: 1px solid transparent; /* this */ 
}

来源

2013-05-27 10:27:19

您有一个没有明确颜色的零宽度边框，在悬停时变为灰色1像素边框，并且您只尝试转换border-color。这实际上并不奏效 - 发生的情况是宽度立即变为1像素，然后您将蓝色边框变为灰色边框。你正在改变一件事，但完全转换别的东西。

边框以蓝色开始的原因是因为您没有为初始状态指定边框颜色，所以它的文字颜色也是蓝色。这是by design，而不是任何浏览器中的错误。我无法分辨出您想要过渡的边界（仅限宽度，仅限于颜色还是两者），因此很难提出解决方案。

来源

2013-05-27 10:26:33 BoltClock

边框颜色转换css3错误

回答

相关问题