font awesome - 悬停时堆叠圆圈颜色变化

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>

font awesome - 悬停时堆叠圆圈颜色变化

font awesome - stack circle color change on hover

css

font-awesome

font-awesome-5