CSS过渡效果::改变颜色但不是边框的文本

Question

我试图对一些图标应用过渡效果。该转换适用于字体（FontAwesome），但不适用于边框，我不确定原因。从昨天开始尝试，通过包括*在内的网络进行梳理，但没有任何结果。

你可以看到的例子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;} 

任何建议都非常赞赏。

Answer 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; 
} 

或者更好，找错了声明与正确的一个修复。