如何在悬停状态下制作具有不同颜色但颜色相同的文本和图标的按钮？

Question

我有一个带有图标（fontawesome）和文本的大纲按钮。图标为绿色，文本为灰色。我已经做到了。在悬停状态下，我需要图标和文本都变成白色，而背景变成绿色。我无法实现这一点，因为它是一个大纲按钮。我的悬停状态也将边框和背景应用于图标。 （我正在使用引导程序 4）。

这是我需要实现的：

我的代码：

.nh-round-secondary-btn {
  border: 2px solid #eeeeee;
  border-radius: 100px;
  color: #717980;
}

.nh-round-secondary-btn i {
  color: #8abe57;
}

.nh-round-secondary-btn:hover,
.nh-round-secondary-btn:hover i {
  border: 2px solid #8abe57;
  background-color: #8abe57;
  color: #ffffff;
}

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-9ZfPnbegQSumzaE7mks2IYgHoayLtuto3AS6ieArECeaR8nCfliJVuLh/GaQ1gyM" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<button type="button" class="btn nh-round-secondary-btn col-lg-5"><i class="fas fa-filter pr-2"></i>Text</button>

Answer 1

.nh-round-secondary-btn {
  border: 2px solid #eeeeee;
  border-radius: 100px;
  color: #717980;
}

.nh-round-secondary-btn i {
  color: #8abe57;
}

.nh-round-secondary-btn:hover {
  background-color: #8abe57;
  color: #fff !important;
}
.nh-round-secondary-btn:hover i {
  color: #fff;
}

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-9ZfPnbegQSumzaE7mks2IYgHoayLtuto3AS6ieArECeaR8nCfliJVuLh/GaQ1gyM" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<button type="button" class="btn nh-round-secondary-btn col-lg-5"><i class="fas fa-filter pr-2"></i>Text</button>

Answer 2

您在选择元素时似乎正在处理特殊性问题。请参阅下面的建议修改。

.btn.nh-round-secondary-btn {
  border: 2px solid #eeeeee;
  border-radius: 100px;
  color: #717980;
}

.btn.nh-round-secondary-btn i {
  color: #8abe57;
  transition: color .2s;
  background-color: transparent;
}

.btn.nh-round-secondary-btn:hover i {
  color: #fff;
}
.btn.nh-round-secondary-btn:hover {
  border-color: #8abe57;
  background-color: #8abe57;
  color: #fff;
}

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-9ZfPnbegQSumzaE7mks2IYgHoayLtuto3AS6ieArECeaR8nCfliJVuLh/GaQ1gyM" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<button type="button" class="btn nh-round-secondary-btn col-lg-5"><i class="fas fa-filter pr-2"></i>Text</button>

Answer 3

为什么会这样？

您的 :hover 状态 color 正在被您导入的一个 CSS 文件中具有相同特异性级别的另一条规则覆盖。当两个相互冲突的 CSS 规则以相同的特性应用时，CSS 将选择最后应用的一个 。

确切地说，这是来自引导程序 _buttons.scss:23 的 .btn:hover 规则。您可以通过增加选择器的特异性来应用您的规则（就像我在下面的 sn-p 中通过使选择器 .btn.nh-round-secondary-btn:hover 所做的那样），或者在 规则上使用 !important 你想强行增加特异性。

另一种方法是确保在引导后导入 CSS 文件，因为 CSS 规则是按照接收顺序进行评估的，但我建议使用更高的特异性，因为它更容易预测。

---

其他有用的链接

• 这是Mozilla article on CSS Specificity
• 这是Specificity Calculator，您可以准确了解选择器的不同部分如何影响其特异性。

---

修订片段：

.nh-round-secondary-btn {
  border: 2px solid #eeeeee;
  border-radius: 100px;
  color: #717980;
}

.nh-round-secondary-btn i {
  color: #8abe57;
}

.btn.nh-round-secondary-btn:hover,
.nh-round-secondary-btn:hover i {
  border: 2px solid #8abe57;
  background-color: #8abe57;
  color: #ffffff;
}

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-9ZfPnbegQSumzaE7mks2IYgHoayLtuto3AS6ieArECeaR8nCfliJVuLh/GaQ1gyM" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<button type="button" class="btn nh-round-secondary-btn col-lg-5"><i class="fas fa-filter pr-2"></i>Text</button>