4

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

当我的鼠标在按钮/链接上时，边框变为蓝色，然后过渡。我在 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;
}

提前致谢 ！

4

2 回答 2

3

更新了小提琴。

显式声明链接正常状态下的透明边框：

.bouton a {
    transition: background-color 1s, border-color 1s;
    padding: 5px 7px 8px 7px;
    text-decoration: none;
    border: 1px solid transparent; /* this */
}
于 2013-05-27T10:27:19.917 回答
2

您有一个没有明确颜色的零宽度边框，在悬停时变为灰色 1 像素边框，并且您尝试仅转换border-color. 这实际上不起作用——宽度立即变为 1 个像素，然后蓝色边框变为灰色边框。你正在改变一件事，但完全转换另一件事。

边框从蓝色开始的原因是因为您没有为初始状态指定边框颜色，所以它采用了也是蓝色的文本颜色。这是设计使然，而不是任何浏览器中的错误。我不知道您想要过渡的边框到底是什么（仅宽度，仅颜色，或两者兼而有之？），因此很难提出解决方案。

于 2013-05-27T10:26:33.540 回答