字体真棒悬停问题答案

【问题标题】：Font Awesome Hover Issue字体真棒悬停问题
【发布时间】：2016-12-26 18:43:12
【问题描述】：

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

我想要实现的是图标后面的圆圈上的悬停样式。

<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/

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

【问题讨论】：

标签： css font-awesome

【解决方案1】：

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

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

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

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

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

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

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

CSS：

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

【讨论】：

只用.fa-stack:hover { .. }得到了同样的结果
@Press 如果这是想要的效果，那么它也可以。更新了答案。
谢谢，第一个做了我需要的。

【解决方案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;
}

【讨论】：