更改FontAwesome span图标的悬停颜色

Question

我有这个范围：

<span class="fa fa-green fa-arrow-circle-o-right" aria-hidden="true"></span>

我改变了这样的颜色：

.fa-green {
    color: #008d4c;
}

但是，悬停功能不起作用：

.fa-green:hover {
    color: black;
}

怎么了？

Answer 1

你的代码看起来很好。确保您的悬停样式不会被其他样式或类覆盖。

HTML

<a href="#">
  <span class="fa fa-green fa-arrow-circle-o-right fa-5x" aria-hidden="true"></span
</a>
<a href="#" class="more-power">
   <span class="fa fa-green fa-arrow-circle-o-right fa-5x" aria-hidden="true"></span
</a>

CSS

    .fa-green {
      color: #008d4c
    }

    .fa-green:hover {
      color: black
    }

    a.more-power:hover span {
      color: #008d4c
    }

看看https://jsfiddle.net/ayjwm23d/36/