悬停时在 Font Awesome 样式之间切换答案

【问题标题】：Toggling between Font Awesome styles on hover悬停时在 Font Awesome 样式之间切换
【发布时间】：2016-06-07 06:01:16
【问题描述】：

我是一名有抱负的网页设计师，需要帮助解决我遇到的问题。我在 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>

这是我想让它在悬停时更改的内容：

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>

谢谢，

阿什利

【问题讨论】：

标签： html css

【解决方案1】：

正常的 :hover css 不起作用的原因是 <i> 标签相互重叠。如果您将箭头<i> 标签放在圆圈<i> 内，它将起作用：

您会注意到箭头变大了两倍（我假设这是来自 '2x' 类），对 Font Awesome 不太熟悉，但可能有一个简单的修复方法。

【讨论】：