Come posso disabilitare il colore al passaggio del mouse di bootstrap per i collegamenti

Question

Ciao sto usando Bootstrap.

Bootstrap definisce

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

ho questo link/CSS-classi

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

Come posso disabilitare il colore Hoover?

Desidero che i collegamenti verdi rimangano verdi e quelli gialli gialli, senza escludere: al passaggio del mouse per ogni singola classe? (questa domanda non è obbligatoria in base al bootstrap).

ho bisogno di qualcosa di simile

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

e penso

.yellow { 
    color: yellow !important; 
} 

non è una buona pratica

Answer 1

se qualcuno avesse voglia ho finito con:

a { 
    color: inherit; 
} 

Answer 2

Mark color: #005580; come color: #005580 !important;.

Sostituisce il hover di bootstrap predefinito.

Answer 3

Vorrei andare con qualcosa come this 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; } 

Answer 4

io non sono un esperto di Bootstrap, ma suona per me che è necessario definire una nuova classe chiamata nohover (o qualcosa di equivalente) quindi nel codice del link aggiungi la classe come ultimo attributo valore e:

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

Poi nel file/CSS Bootstrap MENO, definire nohover (utilizzando l'esempio JSFiddle sopra):

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

biforcuta la JSFiddle qui: http://jsfiddle.net/9rpkq/

Answer 5

Si potrebbe elimina tutto: regola lo stile di hover da document.styleSheets.

Basta passare attraverso tutti gli stili CSS con JavaScript e rimuovere tutte le regole, che contengono ": hover" nel loro selettore. Io uso questo metodo quando ho bisogno di rimuovere: stili di passaggio del mouse da bootstrap 2.

_.each(document.styleSheets, function (sheet) { 
    var rulesToLoose = []; 
    _.each(sheet.cssRules, function (rule, index) { 
     if (rule.selectorText && rule.selectorText.indexOf(':hover') > 0) { 
      rulesToLoose.push(index); 
     } 
    }); 

    _.each(rulesToLoose.reverse(), function (index) { 
     if (sheet.deleteRule) { 
      sheet.deleteRule(index); 
     } else if (sheet.removeRule) { 
      sheet.removeRule(index); 
     } 
    }); 
}); 

ho usato sottolineatura per iterare array, ma si potrebbe scrivere quelli con anello puro js così:

for (var i = 0; i < document.styleSheets.length; i++) {} 

Answer 6

a {background-color:transparent !important;}