代码之家 › 专栏 › 技术社区 › Karan

字体棒极了-在悬停时堆叠圆圈颜色更改

font-awesome-5 font-awesome css

-1

Karan · 技术社区 · 7 年前

我正在使用字体可怕的图标框架。

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

上图为正常状态。

在悬停或对焦时,我希望圆形颜色变为带红色边框的白色,而时间图标阴影变为红色。我需要在悬停的时候做一些相反的动作。但由于某些原因,这并不是发生在这个圈子里。

请告诉我哪里出错了。

1 回复 | 直到 7 年前

Temani Afif 7 年前

您可以这样简化代码,不需要圆形图标:

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

推荐文章

Simon · 使用React更改字体可怕图标的颜色

3 年前

Muhammad Asif Mohtesham · 在Font Awesome中,是否可以使用CSS内容属性在“far”和“fas”数据前缀之间切换?[副本]

7 年前

en Peris · 使用JQuery动态更改AwesomeIcon的颜色

7 年前

Pranta Saha · 为什么Font Awesome图标类不同

7 年前

Mav · 如何将图标与固定高度标记的中心对齐[重复]

7 年前

LP13 · 在中心对齐定位标记内的内容

7 年前

Fjott · CSS-居中字体超级图标

7 年前

Sinan Samet · 字体很棒的图标不会显示在Angular 5中

7 年前

Tithos · 品牌FA5图标不工作

7 年前

SuperUberDuper · 字体awesome在加载之前显示方块

7 年前