web-dev-qa-db-fra.com

Comment puis-je désactiver la couleur de survol du démarrage pour les liens

Salut j'utilise Bootstrap.

Bootstrap définit 

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

J'ai ce liens/classes CSS

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

Comment puis-je désactiver la couleur de l'aspirateur?

Je veux que les liens verts restent verts et que les liens jaunes soient jaunes, sans que cela soit prioritaire: passer pour chaque classe? (cette question n'est pas obligatoire dépendante de bootstrap).

j'ai besoin de quelque chose comme

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

et je pense 

.yellow {
    color: yellow !important;
}

n'est pas une bonne pratique

csstwitter-bootstraphref
41
wutzebaer

si quelqu'un se soucie je me suis retrouvé avec:

a {
    color: inherit;
}
134
wutzebaer

Je voudrais aller avec quelque chose comme ce 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; }
11
Mahmoud
a {background-color:transparent !important;}
7
Ritz Mitchell Dacanay

Si vous aimez les hacks laids que vous ne devriez jamais faire dans les systèmes du monde réel; vous pouvez supprimer toutes les règles de style: survolez de document.styleSheets.

Il suffit de parcourir tous les styles CSS avec JavaScript et de supprimer toutes les règles contenant ": hover" dans leur sélecteur. J'utilise cette méthode lorsque je dois supprimer: survoler les styles de 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);
        }
    });
});

J'ai utilisé le tiret de soulignement pour les tableaux itératifs, mais on pourrait aussi écrire ceux avec une boucle js pure:

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

Marquez color: #005580; comme color: #005580 !important;.

Il remplacera le survol par défaut du bootstrap.

1
Harpreet

Je ne suis pas un expert en Bootstrap, mais il me semble que vous devriez définir une nouvelle classe appelée nohover (ou quelque chose d'équivalent), puis dans votre code de lien, ajoutez la classe comme dernière valeur d'attribut:

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

Ensuite, dans votre fichier Bootstrap LESS/CSS, définissez nohover (à l'aide de l'exemple JSFiddle ci-dessus):

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

Forked le JSFiddle ici: http://jsfiddle.net/9rpkq/

0
tatlar