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属性，您可以实现输出。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

在悬停时替换FontAwesome堆栈

2 个答案: