更改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/