css - CSS 悬停 2 图标

Question

我正在使用堆叠的 fontawesome 图标来创建社交图标：

.fa-circle {
color: #f1f1f1;
}

.fab-facebook-f {
color: blue;
}

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

<a class="author-box-social-icon" href="" target="_blank">
  <span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fab fa-facebook-f fa-stack-1x"></i>
  </span>
</a>

如何在悬停时同时更改圆圈图标和 Facebook 图标？

Answer 1

如果要更改图标悬停时的颜色。添加此代码。

.fa-circle {
color: #f1f1f1;
}

.fab-facebook-f {
color: blue;
}


.author-box-social-icon:hover .fa-circle{color:#444;}
  .author-box-social-icon:hover .fa-facebook-f{color:#fff;}

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

<a class="author-box-social-icon" href="" target="_blank">
  <span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fab fa-facebook-f fa-stack-1x"></i>
  </span>
</a>

Answer 2

.fa-circle {
color: #f1f1f1;
}
.fab-facebook-f {
color: blue;
}
.author-box-social-icon:hover .fa-circle {
  color: #64908A;
}
.author-box-social-icon:hover .fa-facebook-f {
  color: #f00;  
}

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

<a class="author-box-social-icon" href="" target="_blank">
  <span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fab fa-facebook-f fa-stack-1x"></i>
  </span>
</a>

Answer 3

尝试以下代码也使用转换。

.fa-circle {
  color: #f1f1f1;
}
.fab-facebook-f {
  color: blue;
}
.author-box-social-icon i {
  transition: .3s ease-in-out;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -ms-transition: .2s ease-in-out;  
}
.author-box-social-icon:hover .fa-circle {
  color: blue;
}
.author-box-social-icon:hover .fa-facebook-f {
  color: #f1f1f1;
}

<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>
<a class="author-box-social-icon" href="" target="_blank">
  <span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fab fa-facebook-f fa-stack-1x"></i>
  </span>
</a>