css - tooltips - ¿Cómo puedo deshabilitar el color de desplazamiento del bootstrap para los enlaces?

tooltips bootstrap

Question

Hola, estoy usando Bootstrap.

Bootstrap define

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

Tengo estos enlaces / clases de CSS

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

¿Cómo puedo desactivar el color hoover?

Quiero que los enlaces verdes se mantengan verdes y los amarillos amarillos, sin anular: ¿desplazarse para cada clase? (esta pregunta no es obligatoria dependiente de bootstrap).

necesito algo como

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

y yo pienso

.yellow {
    color: yellow !important;
}

no es una buena practica

Answer 1

Marca de color: #005580; como color: #005580 !important; .

Anulará la activación predeterminada de la rutina de carga.

Answer 2

Me gustaría ir con algo como esto 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 3

No soy un experto en Bootstrap, pero me parece que debería definir una nueva clase llamada nohover (o algo equivalente), luego en su código de enlace agregue la clase como último valor de atributo:

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

Luego, en su archivo LESS / CSS de Bootstrap, defina nohover (usando el ejemplo de JSFiddle anterior):

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

Bifurcó el JSFiddle aquí: http://jsfiddle.net/9rpkq/

Answer 4

Si a alguien le importa termino con:

a {
    color: inherit;
}

Answer 5

Si te gustan los hacks feos que nunca deberías hacer en los sistemas de los mundos reales; puede eliminar todas las reglas de estilo de desplazamiento de document.styleSheets.

Simplemente pase por todos los estilos CSS con JavaScript y elimine todas las reglas, que contienen ": hover" en su selector. Utilizo este método cuando necesito eliminar: hover styles 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);
        }
    });
});

Utilicé el guión bajo para iterar matrices, pero también se podían escribir con bucles js puros:

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

Answer 6

a {background-color:transparent !important;}