Jak mogę wyłączyć kolor wskaźnika aktywacji początkowej dla łączy

Question

Witam Używam Bootstrap.

Bootstrap definiuje

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

mam to linki/CSS-klasy

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

Jak mogę wyłączyć kolor odkurzacz?

Chcę, aby zielone linki pozostały zielone, a żółte żółte, bez nadpisywania: hover dla każdej klasy? (to pytanie nie jest obowiązkowe w zależności od bootstrapu).

muszę coś podobnego

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

i myślę

.yellow { 
    color: yellow !important; 
} 

nie jest dobrą praktyką

Answer 1

jeśli ktoś dba Skończyło się na:

a { 
    color: inherit; 
} 

Answer 2

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

Spowoduje to zastąpienie domyślnego dymku ładowania początkowego.

Answer 3

pójdę z czymś 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

Nie jestem ekspertem Bootstrap, ale brzmi mi się, że należy zdefiniować nowa klasa o nazwie nohover (lub coś podobnego), a następnie w kodzie połączenia dodaj klasę jako ostatnią wartość atrybutu e:

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

Następnie w pliku/CSS Bootstrap mniej określić nohover (na przykładzie JSFiddle powyżej):

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

rozwidlony JSFiddle tutaj: http://jsfiddle.net/9rpkq/

Answer 5

Można strip all: hover style rules from document.styleSheets.

Wystarczy przejrzeć wszystkie style CSS za pomocą JavaScript i usunąć wszystkie reguły, które zawierają ": hover" w ich selektorze. Używam tej metody, kiedy muszę usunąć: hover style from 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); 
     } 
    }); 
}); 

ja używaliśmy podkreślenia dla iteracji tablic, ale można napisać te z pętli czystym js także:

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

Answer 6

a {background-color:transparent !important;}