字体真棒悬停问题

Question

此问题与

相关

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

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

如您所见，当您滑过图像时，只有图像的一部分会激活悬停效果。我想这是因为其他图像（标志）在上面，如果它..有什么办法可以 "avoid" 标记图标并使其工作？

Answer 1

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

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

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

如果你想定位 all .fa-stacks:

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

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

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

字体真棒悬停问题

Font Awesome Hover Issue

css

font-awesome