html - 当包含另一个特定类时覆盖“悬停”

Question

我有这个按钮：

<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;
  }

我不想上三等。

标签： htmlcssbootstrap-4

Answer 1

通过在类之间放置一个空格，您正在使用后代组合器。

.btn-link-dark .btn-link

翻译为“A.btn-link是 a 的后代.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>