Question

我有这个按钮：

df

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

这可以解决问题：

<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

我不想上三等班。

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

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

Answer 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/

这很好。

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

3 个答案: