当鼠标悬停在其上时，如何更改“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;
   }

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

如果您改变了编写CSS的方式并在悬停时定位fa-stack，则效果很好。

CSS：

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

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

Answer 3

您可以在包装元素上使用悬停。 .fa-circle在技术上并没有被徘徊，因为它被家里隐藏了。

这适用于任何通用图标，而不仅仅是家庭：

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