代码之家 › 专栏 › 技术社区 › Hypenate

包含其他特定类时覆盖“hover”[重复]

bootstrap-4 css html

Hypenate · 技术社区 · 7 年前

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

3 回复 | 直到 7 年前

CertainPerformance 7 年前

通过在类之间放置一个空格,您可以使用 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>

Shahil Mohammed 7 年前

您可以使用 !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>

VSM 7 年前

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