如何在鼠标悬停时更改“fa图标”的颜色？

问题描述：

我想改变放置在堆栈中的两个fa图标的颜色。但外部图标的颜色不会改变。如何在鼠标悬停时更改“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; 
    }

它确实改变了颜色，但'home'图标是在它前面，覆盖它。这导致'circle'的'hover'状态永远不会被触发，因此它不会改变颜色。 –

答

将围绕元件上悬停：

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

现在我明白了。非常感谢。 – rajagopalx

我没有看到你的答案直到写完我的后... +1 :) – NateW

答

您可以在包裹元素上使用悬停。 .fa圈在技术上并没有被盘旋，因为它被家庭隐藏起来。

这将任何普通的图标，不只是在家工作：

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

答

如果你改变你的CSS编写方式和悬停目标的fa-stack它的伟大工程。

CSS：

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