Font Awesome Hover Issue

Question

此问题与https://stackoverflow.com/questions/25770590/change-color-when-hover-a-font-awesome-icon#=

有关

我想要实现的是Circle背后的悬停样式。

<span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>

.fa-circle:hover {
    color: red;
}

http://jsfiddle.net/uvamhedx/802/

如您所见，当您浏览图像时，只有一部分会激活悬停效果。我想这是因为其他图像（旗帜）位于顶部，如果它..有什么方法可以“避免”标志图标并使其工作？

Answer 1

.fa-circle是.fa-stack的孩子，因此请检查父母的悬停。

如果您只想定位.fa-circle：

.fa-stack:hover .fa-circle{
    color: red;
}

如果您想定位所有 .fa-stack：

.fa-stack:hover{
    color: red;
}

或者，如果您创建自己的类，则不会影响正常行为：

<span class="fa-stack fa-5x hover-change">

CSS：

.hover-change:hover {
    color: red;
}

Answer 2

我使用自定义类来避免原始定义的默认行为：

HTML：

<span class="fa-stack fa-5x customClass">
  <i class="fa fa-circle fa-stack-2x customClassRed"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>

CSS：

.customClass:hover .customClassRed {
    color: red;
}