当鼠标悬停在它上面时如何改变"fa icon"的颜色？

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;
   }

Answer 1

将悬停设置在周围元素上:

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