FontAwesome 堆栈在悬停时替换

Question

所以我一直在尝试做一个快速动画来替换悬停时的整个跨度，但我似乎无法让它工作。我应该如何处理悬停时替换跨度？

<h1>I need this replaced...</h1>
<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
<h1>to this</h1>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
<h1>on hover</h1>

在此处示例 CodePen。

Answer 1

通过更改悬停时 twitter 的 :before css 属性，您可以实现输出。

span.fa-stack:hover i.fa-twitter:before{content:"\f024"; color:#fff}

span.fa-stack:hover i.fa-square-o:before{content:"\f111"}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<h1>I need this replaced...</h1>
<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>

Answer 2

您可以在 CSS 中通过组合 :hover 和 :first-child/:last-child CSS 选择器来实现此目的。

.fa-stack.fa-lg:hover :first-child:before {
  content: "\f111";
}

.fa-stack.fa-lg:hover :last-child:before {
  content: "\f024";
  color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>

FontAwesome 堆栈在悬停时替换

FontAwesome Stack Replace on Hover

html

css

font-awesome