在悬停时切换Font Awesome样式

Question

我是一位有抱负的网页设计师，需要帮助解决我遇到的问题。我在Font Awesome中有一个图标，当我悬停在它上面时，我想改变颜色/样式。

以下是我想要使用的默认样式：

CSS

.fa-circle {
  color:red;
}

HTML：

<span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-arrow-right fa-stack-1x fa-inverse"></i>
</span>

http://jsfiddle.net/94n0zxbt/2/

以下是我希望将其更改为悬停时的内容：

http://jsfiddle.net/94n0zxbt/5/

CSS

.fa-circle {
  color:white;
  border-color: red;
  border-radius: 90px;
  border-style: solid;
}

.fa-arrow-right {
  color: red;
}

HTML

<span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-arrow-right fa-stack-1x fa-inverse"></i>
</span>

谢谢，

阿什利

Answer 1

正常：悬停css不起作用的原因是<i>标签彼此重叠。如果您将箭头<i>标记放在圈<i>内，它将起作用：

http://jsfiddle.net/pjpwea/94n0zxbt/6/

你会注意到箭头已经变大了两倍（我假设这是来自'2x'类），不是很熟悉Font Awesome，但可能很容易解决。