Overwrite 'hover' when another specific class is included

Question

I have this button:

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

When I hover over it, it becomes blue. I want to alter this.

This does the trick:

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

But I only want this when the class btn-link-dark is included.
These syntax, used seperate, don't work:

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

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

I don't want a third class.

your only fault was that you have this space between hover .btn-link remove it as in the 2 answers and it will work ;) — Synoon, Aug 17 '18 at 05:59

score 2 · Accepted Answer · answered Aug 17 '18 at 05:55

By putting a space between the classes, you're using the descendant combinator.

.btn-link-dark .btn-link

translates to "A .btn-link which is a descendant of a .btn-link-dark". To indicate that one element needs both class names, don't put a space between them, eg .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>

score 0 · Answer 2 · answered Aug 17 '18 at 05:55

You can override using !important;

This approach can be used if you want to override existing hover styles with your styles.

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

score 0 · Answer 3 · answered Aug 17 '18 at 06:00

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

This works fine.

Overwrite 'hover' when another specific class is included

3 Answers3