CSS 过渡效果 :: 文本改变颜色，但不改变边框答案

【问题标题】：CSS Transition Effect :: Text changing color, but not borderCSS 过渡效果 :: 文本改变颜色，但不改变边框
【发布时间】：2015-08-13 12:57:42
【问题描述】：

我正在尝试对某些图标应用过渡效果。过渡适用于字体（FontAwesome），但不适用于边框，我不知道为什么。从昨天开始一直在尝试，梳理了包括stackoverflow在内的网络，但一无所获。

你可以看例子here，这里是代码：

.social-nets-wrapper .social li a {color: rgb(53, 61, 68); font-size: 35px; border-color: #272F37;}

.social-nets-wrapper .social li a::before {background-color: #272f37;}

.social-nets-wrapper .social li a:hover {color: #f7941e; border-color: #f7941e; transition: all 300ms linear 0s;}

非常感谢任何建议。

【问题讨论】：

您的示例似乎适用于 OSX 上的 Chrome 43。我建议的唯一更改是将您的 transition: all 300ms linear 0s; 属性移出 :hover 并移至 .social li a。

标签： css hover border css-transitions border-color

【解决方案1】：

你已经在你的 CSS 的某个地方设置了：

.social-nets-wrapper .social li a:hover {
    text-decoration: none;
    border-color: #FFF !important;
}

那么，你需要输入：

.social-nets-wrapper .social li a:hover {
    color: #F7941E;
    border-color: #F7941E !important; /* add !important to override */
    transition: all 300ms linear 0s;
}

或者更好的是，找到错误的声明并用正确的声明修复它。

【讨论】：

你成功了，Imgonzalves。覆盖有效，但我将进入样式并在#fff 上删除该覆盖。奇怪的；不知道为什么会这样......无论如何，非常感谢您的帮助兄弟。非常感谢。
文件 main-style.css，第 910 行。使用 Firefox 检查器或类似的其他检查器很容易找到。