[css] How can I disable the bootstrap hover color for links?

I am using Bootstrap.

Bootstrap defines

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

I have this links / CSS-classes

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

How can I disable the hoover color?

I want the green links to stay green and the yellow ones yellow, without overriding :hover for every single class? (this question is not mandatory dependent to bootstrap).

I need something like

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

and I think

.yellow {
    color: yellow !important;
}

is not a good practice.

I am not a Bootstrap expert, but it sounds to me that you should define a new class called nohover (or something equivalent) then in your link code add the class as the last attribute value:

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

Then in your Bootstrap LESS/CSS file, define nohover (using the JSFiddle example above):

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

Forked the JSFiddle here: http://jsfiddle.net/9rpkq/

a {background-color:transparent !important;}

If you like an ugly hacks which you should never do in real worlds systems; you could strip all :hover style rules from document.styleSheets.

Just go through all CSS styles with JavaScript and remove all rules, which contain ":hover" in their selector. I use this method when I need to remove :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);
        }
    });
});

I did use underscore for iterating arrays, but one could write those with pure js loop as well:

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

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

It will override default bootstrap hover.

I would go with something like 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; }

For me none of the simple solutions above worked, however by changing only the hover I was able to get it to work:

  :hover {
    color: inherit;
    text-decoration: none;
  }