问题描述:

Hi i'm 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

网友答案:

if anyone cares i ended up with:

a {
    color: inherit;
}
网友答案:

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; }
网友答案:

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 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;}
相关阅读:
Top