如何在鼠标悬停时更改“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/