it-swarm.com.de

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

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 Staubsaugerfarbe deaktivieren?

Ich möchte, dass die grünen Links grün bleiben und die gelben gelb, ohne dass sie außer Kraft gesetzt werden. (Diese Frage ist nicht zwingend abhängig vom Bootstrap).

ich brauche so etwas

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

und ich denke 

.yellow {
    color: yellow !important;
}

ist keine gute Praxis

41
wutzebaer

wenn es jemanden interessiert, endete ich mit:

a {
    color: inherit;
}
134
wutzebaer

Ich würde mit etwas wie this JSFiddle gehen:

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; }
11
Mahmoud
a {background-color:transparent !important;}

Wenn Sie hässliche Hacks mögen, die Sie niemals in realen Weltsystemen tun sollten; Sie können alle entfernen: Hover-Style-Regeln aus document.styleSheets.

Gehen Sie einfach alle CSS-Stile mit JavaScript durch und entfernen Sie alle Regeln, die ": hover" in ihrer Auswahl enthalten. Ich verwende diese Methode, wenn ich: hover-Styles von 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 Unterstriche für iterierende Arrays verwendet, aber man könnte auch solche mit reiner js-Schleife schreiben:

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

Markieren Sie color: #005580; als color: #005580 !important;.

Der Standard-Bootstrap-Hover wird überschrieben.

1
Harpreet

Ich bin kein Bootstrap-Experte, aber es klingt für mich, dass Sie eine neue Klasse mit dem Namen nohover (oder etwas Äquivalentes) definieren und dann in Ihrem Link-Code die Klasse als letzten Attributwert hinzufügen:

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

Definieren Sie dann in Ihrer Bootstrap LESS/CSS-Datei nohover (mithilfe des obigen JSFiddle-Beispiels):

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

Gab das JSFiddle hier: http://jsfiddle.net/9rpkq/

0
tatlar