Wie kann ich die Bootstrap Hover-Farbe für Links deaktivieren

Question

Hallo, ich benutze Bootstrap.

Bootstrap definiert

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

Ich habe diese Links/CSS-Klassen

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

Wie kann ich die staubsauger Farbe deaktivieren?

Ich möchte die grünen Links grün bleiben und die gelben gelb, ohne zu überschreiben: Hover für jede einzelne Klasse? (Diese Frage ist nicht zwingend abhängig von Bootstrap).

Ich brauche so etwas wie

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

und ich denke,

.yellow { 
    color: yellow !important; 
} 

Answer 1

wenn jemand kümmert sich Ich landete mit:

a { 
    color: inherit; 
} 

Answer 2

Mark color: #005580; als color: #005580 !important; keine gute Praxis ist.

Es überschreibt den Standard-Bootstrap-Hover.

Answer 3

ich mit so etwas wie this JSFiddle gehen würde:

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

Ich bin kein Experte Bootstrap, aber es klingt für mich, dass Sie definieren sollten eine neue Klasse namens nohover (oder etwas Äquivalentes) dann in Ihrem Link-Code fügen Sie die Klasse als das letzte Attribut Wert hinzu e:

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

Dann in Ihrer Bootstrap LESS/CSS-Datei definieren nohover (mit dem JSFiddle Beispiel oben):

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

die hier Gespaltene JSFiddle: http://jsfiddle.net/9rpkq/

Answer 5

Sie könnten strip all: Hover-Stilregeln aus document.styleSheets.

Gehen Sie einfach alle CSS-Stile mit JavaScript durch und entfernen Sie alle Regeln, die ": Hover" in ihrem Selektor enthalten. Ich verwende diese Methode, wenn ich: Hover-Stile aus Bootstrap 2 entfernen muss.

_.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); 
     } 
    }); 
}); 

Ich habe den Einsatz unterstreicht Arrays zur Iteration, aber man kann auch solche mit reiner js Schleife schreiben:

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

Answer 6

a {background-color:transparent !important;}