令人敬畏的字体-悬停时堆栈圆圈颜色发生变化 [英] font awesome - stack circle color change on hover

问题描述

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

I am using the font awesome framework for the icons.

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

上图为正常状态.

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

On hover or focus, i want the circle color should change to white with red border and times icon shade changes to red. I need some kind of inverse on the hover action. But for some reason, it is not happening for the circle.

请建议我在哪里弄错了.

Please suggest where am i making the mistake.

推荐答案

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

You can simplify the code like this, no need icon for the circle:

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

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

And considering your initial code the issue is that you are applying the hover on the child element but it should be applied to the parent because the circle won't be hover since it's under the cross:

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

这篇关于令人敬畏的字体-悬停时堆栈圆圈颜色发生变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！