html - Font Awesome 图标在没有动画的情况下悬停时改变颜色

Question

我遇到了一个问题，字体很棒的图标在悬停时改变了它的颜色，没有动画。我希望当用户将鼠标悬停在图标上时，图标会更改其颜色以更改靛蓝、蓝色和红色，而不会从底部出现出现彩色图标的动画(忘记了动画类型名称)。

<div class="clearfix">
    <a href="#" class="btn btn-icon btn-social btn-sm white no-radius no-borders">
        <i class="fa fa-facebook" aria-hidden="true"></i>
        <i class="fa fa-facebook indigo" aria-hidden="true"></i>
    </a>
    <a href="#" class="btn btn-icon btn-social btn-sm white no-radius no-borders">
        <i class="fa fa-twitter" aria-hidden="true"></i>
        <i class="fa fa-twitter blue" aria-hidden="true"></i>
    </a>
    <a href="#" class="btn btn-icon btn-social btn-sm white no-radius no-borders">
        <i class="fa fa-google-plus" aria-hidden="true"></i>
        <i class="fa fa-google-plus red" aria-hidden="true"></i>
    </a>
</div>

非常感谢您的帮助。

注意:我已经查过了Change color when hover a font awesome icon?

Answer 1

试试这个 Css 代码。

.fa-facebook, .fa-twitter,.fa-google-plus {
 -webkit-transition-property: none;
 -moz-transition-property: none;
 -o-transition-property: none;
 transition-property: none;
  animation-name: none;
}


.fa-facebook:hover, .fa-twitter:hover,.fa-google-plus:hover {
 color: indigo;
 -webkit-transition-property: none;
 -moz-transition-property: none;
 -o-transition-property: none;
 transition-property: none;
  animation-name: none;
}