当鼠标悬停在 "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;
}

Answer 2

您可以在环绕元素上使用悬停。 .fa-circle 在技术上没有悬停，因为它被主页隐藏了。

这适用于任何通用图标，而不仅仅是主页：

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

How to change color of "fa icon" when mouse over on it?