FontAwesome堆栈替换悬停

所以我一直在试图做一个快速的动画，取代了整个跨度悬停，但我似乎无法得到它的工作。我应该如何处理关于悬停的替换范围？FontAwesome堆栈替换悬停

<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这里。

来源

2016-11-04 oreo27

通过更改悬停的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>

来源

2016-11-04 12:22:50

感谢。这工作完美。 – oreo27

谢谢，Welome to stackoverflow;） –

@CharantejGolla这很简单，比使用：nth-child选择器更简单，并且完美地解决了这个问题。但是，我会考虑使用第n个子选择器作为解决方案如何对其他用例更灵活的示例。 – Ant

您可以通过组合:hover和:first-child/:last-child CSS选择器在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>

来源

2016-11-04 12:32:40 Ant

FontAwesome堆栈替换悬停

回答

相关问题