当包含另一个特定类时覆盖“悬停”[重复]答案

【问题标题】：Overwrite 'hover' when another specific class is included [duplicate]当包含另一个特定类时覆盖“悬停”[重复]
【发布时间】：2018-08-17 14:00:11
【问题描述】：

我有这个按钮：

<button type="button" class="btn btn-link btn-link-dark">
  <i class="material-icons">help</i>
</button>

当我将鼠标悬停在它上面时，它会变成蓝色。我想改变这个。

这就是诀窍：

  .btn-link:hover {
    color: white;
  }

但我只在包含 btn-link-dark 类时才想要这个。
这些单独使用的语法不起作用：

  .btn-link-dark .btn-link:hover {
    color: white;
  }

  .btn-link-dark:hover .btn-link:hover {
    color: white;
  }

我不想要第三节课。

【问题讨论】：

您唯一的错误是您在悬停 .btn-link 之间有这个空间，如在 2 个答案中将其删除，它将起作用；)

标签： html css bootstrap-4

【解决方案1】：

通过在类之间放置一个空格，您使用的是descendant combinator。

.btn-link-dark .btn-link

转换为“A .btn-link，它是 .btn-link-dark 的后代”。要表示一个元素需要两个类名，请不要在它们之间放置空格，例如.btn-link-dark.btn-link:hover：

.btn-link-dark.btn-link:hover {
  color: white;
}

<button type="button" class="btn btn-link btn-link-dark">
  <i class="material-icons">help (hover effect)</i>
</button>
<button type="button" class="btn btn-link">
  <i class="material-icons">help (no effect)</i>
</button>

【讨论】：

【解决方案2】：

您可以使用 !important;

覆盖

如果您想用您的样式覆盖现有的悬停样式，可以使用此方法。

 .btn-link-dark.btn-link:hover {
    color: red;
  }

  .btn-link-dark.btn-link:hover {
    color: green !important;
  }

<button type="button" class="btn btn-link btn-link-dark">
  <i class="material-icons">help</i>
</button>

【讨论】：

【解决方案3】：

 .btn-link.btn-link-dark:hover {
    color: blue;
  }

  .btn-link:hover {
    color: red;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-link btn-link-dark">
  <i class="material-icons">help</i>
</button>

https://jsfiddle.net/Sampath_Madhuranga/aq9Laaew/158765/

这很好用。

【讨论】：