字体很棒-悬停时堆栈圆圈颜色发生变化

Question

我正在为图标使用超棒的字体框架。

.fa-circle {
  color: red;
}

.fa-times {
  color: #fff;
}

.fa-circle:focus,
.fa-circle:hover {
  color: #fff;
  border: 2px solid black;
}

.fa-times:focus,
.fa-times:hover {
  color: red;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
<span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-times fa-stack-1x"></i>
</span>

以上图像为正常状态。

在悬停或对焦时，我希望圆圈颜色应更改为带有红色边框的白色，并且图标阴影更改为红色。我需要某种关于悬停动作的逆运算。但是由于某种原因，这种情况并没有发生。

请建议我在哪里弄错了。

Answer 1

您可以像这样简化代码，不需要圆圈的图标：

.fa-times {
  color: #fff;
}

.fa-stack {
  border-radius: 50%;
  background: red;
  box-sizing: border-box;
  border: 1px solid transparent;
  transition:.5s;
}

.fa-stack:hover {
  background: #fff;
  border-color:#000;
}

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

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
<span class="fa-stack fa-lg">
    <i class="fa fa-times fa-stack-1x"></i>
 </span>

考虑到您的初始代码，问题在于您将鼠标悬停在子元素上，但应将其应用于父元素，因为圆不会在其下方，因此不会悬停：

.fa-circle {
  color: red;
}

.fa-times {
  color: #fff;
}

.fa-stack:hover .fa-circle {
  color: #fff;
}

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

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" >

<span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-times fa-stack-1x"></i>
 </span>