Hoe kan ik de Bootstrap-zwevenkleur uitschakelen voor links?

Ik gebruik Bootstrap.

Bootstrap definieert

a:hover, a:focus {
    color: #005580;
    text-decoration: underline;
}

Ik heb deze links / CSS-klassen

<a class="green" href="#">green text</a>
<a class="yellow" href="#">yellow text</a>

Hoe kan ik de Hoover-kleur uitschakelen?

Ik wil dat de groene links groen en de gele geel blijven, zonder te overschrijven: Hover voor elke klasse? (Deze vraag is niet verplicht afhankelijk van bootstrap).

Ik heb iets nodig als

a:hover, a:focus {
    color: @nonhoovercolor;
}

en ik denk

.yellow {
    color: yellow !important;
}

is geen goede praktijk.

1, Autoriteit 100%

Als iemand geeft, eindigde ik met:

a {
    color: inherit;
}

2, Autoriteit 8%

Ik zou gaan met zoiets als deze jsfiddle :

HTML:

<a class="green" href="#">green text</a>
<a class="yellow" href="#">yellow text</a>

CSS:

body  { background: #ccc }
/* Green */
a.green,
a.green:hover { color: green; }
/* Yellow */
a.yellow,
a.yellow:hover { color: yellow; }

3, Autoriteit 5%

a {background-color:transparent !important;}

4, Autoriteit 2%

Voor mij werkte geen van de eenvoudige oplossingen hierboven, maar door alleen de hover te veranderen, kon ik het aan het werk krijgen:

 :hover {
    color: inherit;
    text-decoration: none;
  }

5

Mark color: #005580;en color: #005580 !important;

!.

Het zal voorrang op de standaardinstellingen bootstrap hover.

6

Ik ben geen Bootstrap expert, maar het lijkt mij dat u een nieuwe klasse met de naam nohover (of iets equivalent) moeten definiëren dan in uw link code toe te voegen aan de klasse als de laatste attribuut waarde:

<a class="green nohover" href="#">green text</a>
<a class="yellow nohover" href="#">yellow text</a>

Toen in uw Bootstrap MINDER / CSS-bestand, te definiëren nohover (met behulp van de JSFiddle bovenstaande voorbeeld):

a:hover { color: red  }
/* Green */
a.green  { color: green; }
/* Yellow */
a.yellow  { color: yellow; }
a.nohover:hover { color: none;  }

Vork de JSFiddle hier: http://jsfiddle.net/9rpkq/

7

Als u om een ​​of andere reden nog steeds op zoek bent naar een antwoord op een vraag die meer dan 8 jaar oud is – bootstrap sinds V4.2 heeft .text-resetklasse voor dit gebruik-case (dat eigenlijk implementeert het antwoord van Wutzebaer). Zie docs Hier