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

Question

我有一个带有图标 (fontawesome) 和文本的大纲按钮。图标为绿色，文本为灰色。我已经做到了。在它的悬停状态下，我需要图标和文本都变成白色，而背景变成绿色。我很难做到这一点，因为它是一个大纲按钮。我的悬停状态也将边框和背景应用于图标。（我正在使用 bootstrap 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

为什么会这样？

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

应用的规则

准确地说，是 bootstrap 的 _buttons.scss:23 中的 .btn:hover 规则。您可以通过增加选择器的特异性（正如我在下面的代码片段中通过使选择器 .btn.nh-round-secondary-btn:hover 所做的那样）或通过在 上使用 !important 来应用您的规则规则 你想强行增加特异性。

另一种方法是确保在 bootstrap 之后导入 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>

Answer 2

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

看起来您在选择元素时遇到了特异性问题。请参阅下面的建议修改。

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

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

How can I make a button with text and icon in different colors but same colors in hover state?

html

css

button

bootstrap-4

为什么会这样？

其他有用的链接

修改后的代码段：