如何在鼠標懸停時更改「fa圖標」的顏色？

Question

我想改變放置在堆棧中的兩個fa圖標的顏色。但外部圖標的顏色不會改變。

HTML：

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

CSS：

.fa-home:hover{ 
    color: yellow; 
    } 

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

的jsfiddle：http://jsfiddle.net/rajagopalx/k3c1c0bf/

Answer 1

將圍繞元件上懸停：

.fa-stack:hover .fa-home { 
    color: yellow; 
} 
.fa-stack:hover .fa-circle { 
    color: white; 
} 

http://jsfiddle.net/bnh84trn/

Answer 2

您可以在包裹元素上使用懸停。 .fa圈在技術上並沒有被盤旋，因爲它被家庭隱藏起來。

這將任何普通的圖標，不只是在家工作：

.fa-stack:hover .fa { 
    color: yellow; 
} 
.fa-stack:hover .fa-circle{ 
    color: white; 
} 

Answer 3

如果你改變你的CSS編寫方式和懸停目標的fa-stack它的偉大工程。

CSS：

.fa-stack:hover .fa-home { 
    color: yellow; 
} 
.fa-stack:hover .fa-circle 
{ 
    color: white; 
} 

工作例如：http://jsfiddle.net/p2yLcsw0/2/