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堆棧替換懸停

回答

相關問題