CSS 如何禁用链接的引导程序悬停颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16084209/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can i disable the bootstrap hover color for links
提问by wutzebaer
Hi i'm using Bootstrap.
嗨，我正在使用 Bootstrap。
Bootstrap defines
Bootstrap 定义
a:hover, a:focus {
color: #005580;
text-decoration: underline;
}
I have this links / CSS-classes
我有这个链接/ CSS 类
<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).
我希望绿色链接保持绿色，黄色链接保持黄色，而不覆盖每个类的 :hover ？（这个问题不是强制依赖于引导程序）。
i need something like
我需要类似的东西
a:hover, a:focus {
color: @nonhoovercolor;
}
and i think
我认为
.yellow {
color: yellow !important;
}
is not a good practice
不是一个好习惯
回答by wutzebaer
if anyone cares i ended up with:
如果有人关心我最终得到：
a {
color: inherit;
}
回答by Mahmoud
I would go with something like this JSFiddle:
我会用这样的 JSFiddle：
HTML:
HTML：
<a class="green" href="#">green text</a>
<a class="yellow" href="#">yellow text</a>
CSS:
CSS：
body { background: #ccc }
/* Green */
a.green,
a.green:hover { color: green; }
/* Yellow */
a.yellow,
a.yellow:hover { color: yellow; }
回答by Ritz Mitchell Dacanay
a {background-color:transparent !important;}
回答by Mikael Lepist?
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.
如果你喜欢在现实世界的系统中永远不应该做的丑陋的黑客攻击；您可以从 document.styleSheets 中删除所有 :hover 样式规则。
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.
只需使用 JavaScript 浏览所有 CSS 样式并删除所有规则，这些规则在其选择器中包含“:hover”。当我需要从引导程序 2 中删除 :hover 样式时，我会使用此方法。
_.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:
我确实使用下划线来迭代数组，但也可以用纯 js 循环编写那些：
for (var i = 0; i < document.styleSheets.length; i++) {}
回答by tatlar
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:
我不是 Bootstrap 专家，但在我看来，您应该定义一个名为nohover（或等效的东西）的新类，然后在您的链接代码中将该类添加为最后一个属性值：
<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):
然后在你的 Bootstrap LESS/CSS 文件中，定义nohover（使用上面的 JSFiddle 示例）：
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/
在这里分叉 JSFiddle：http: //jsfiddle.net/9rpkq/
回答by Harpreet
Mark color: #005580;as color: #005580 !important;.
标记color: #005580;为color: #005580 !important;。
It will override default bootstrap hover.
它将覆盖默认引导程序悬停。
回答by The Coder
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;
}
