字體真棒哈弗問題

Question

這個問題是關係到https://stackoverflow.com/questions/25770590/change-color-when-hover-a-font-awesome-icon#=

我試圖做到的，是在圈懸停風格背後圖標。

<span class="fa-stack fa-5x"> 
    <i class="fa fa-circle fa-stack-2x"></i> 
    <i class="fa fa-flag fa-stack-1x fa-inverse"></i> 
</span> 

.fa-circle:hover { 
    color: red; 
} 

http://jsfiddle.net/uvamhedx/802/

正如你所看到的，當你走在圖像上，只是其中的一部分將激活懸停效果。我想這是因爲其他圖像（國旗）是頂部，如果..有什麼辦法，我可以「避免」標誌圖標，並使其工作？

Answer 1

.fa-circle是.fa-stack的孩子，因此請檢查父母上的懸停。

如果你只想指定.fa-circle：

.fa-stack:hover .fa-circle{ 
    color: red; 
} 

如果你想針對所有.fa-stack S：

.fa-stack:hover{ 
    color: red; 
} 

或者，如果你創建自己的類，它不會影響正常行爲：

<span class="fa-stack fa-5x hover-change"> 

CSS：

.hover-change:hover { 
    color: red; 
} 

Answer 2

我使用自定義的類來避免原有定義默認行爲：

HTML：

<span class="fa-stack fa-5x customClass"> 
    <i class="fa fa-circle fa-stack-2x customClassRed"></i> 
    <i class="fa fa-flag fa-stack-1x fa-inverse"></i> 
</span> 

CSS：

.customClass:hover .customClassRed { 
    color: red; 
}