Question

我在使用悬停效果处理按钮中的文本和字体真棒图标组时遇到问题。显示html和css时，当光标越过按钮时，它会随着“a.act_study_btn：hover”css的变化而变化，但除非光标悬停在它上面，否则字体真棒书图标不会。我想要的是文本和图标一起工作。我已经在html和css上尝试了一些变化而没有成功。

<span class="active_study"><a class="act_study_btn" href="index.php/right-view">active study<span class="fa fa-book fa_book_sg"></span></a></span>


a.act_study_btn  {
  color: #ff0;
  background: #000093;
  border: 2px solid #000093;
  border-radius: 0.3em;
  padding: 3% 10%;
  text-decoration: none;
  font-size: 1em;
  padding: 1% 3%;
} 
span.fa_book_sg  {
  color: #ff0;
  font-size: 1.2em;
}
a.act_study_btn:hover  {
  cursor: pointer;
  color: #000093;
  background: #dfe1f9;
  border: 2px solid #f00;
}
span.fa_book_sg:hover   {
  color: #000093;
}

欢迎任何建议。

Answer 1

您可以使用以下CSS：

.act_study_btn:hover .fa {
  color: #000093;
}

当按钮悬停在上方时，样式规则将应用于图标。

在此处查看演示：http://codepen.io/sol_b/pen/LbXrGv

使用按钮中的文本和字体真棒图标，悬停效果单独工作

1 个答案: