CSS-如何禁用链接的引导程序悬浮颜色

嗨,我正在使用Bootstrap。

引导程序定义

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

我有这个链接/ CSS类

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

如何禁用胡佛色?

我希望绿色链接保持绿色,而黄色链接保持黄色,而不必覆盖:hover每个课程? (此问题不是强制性的,取决于引导程序)。

我需要类似的东西

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

而且我认为

.yellow {
    color: yellow !important;
}

这不是一个好习惯

wutzebaer asked 2020-02-12T11:44:14Z
6个解决方案
144 votes

如果有人在乎,我最终会得到:

a {
    color: inherit;
}
wutzebaer answered 2020-02-12T11:44:28Z
11 votes

我会选择这样的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; }
Mahmoud answered 2020-02-12T11:44:57Z
8 votes
a {background-color:transparent !important;}
Ritz Mitchell Dacanay answered 2020-02-12T11:45:13Z
2 votes

如果您喜欢一个丑陋的骇客,在现实世界的系统中绝对不应该这样做; 您可以从document.styleSheets中删除所有:hover样式规则。

只需使用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);
        }
    });
});

我确实使用下划线来迭代数组,但是也可以使用纯js循环编写它们:

for (var i = 0; i < document.styleSheets.length; i++) {}
Mikael Lepistö answered 2020-02-12T11:45:46Z
1 votes

color: #005580;标记为color: #005580 !important;

它将覆盖默认的引导程序悬停。

Harpreet answered 2020-02-12T11:46:18Z
0 votes

我不是Bootstrap专家,但是在我看来,您应该定义一个名为nohover(或类似的东西)的新类,然后在链接代码中将该类添加为最后一个属性值:

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

然后在您的Bootstrap LESS / CSS文件中,定义nohover(使用上面的JSFiddle示例):

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

在这里分叉了JSFiddle:[http://jsfiddle.net/9rpkq/]

tatlar answered 2020-02-12T11:47:06Z
translate from https://stackoverflow.com:/questions/16084209/how-can-i-disable-the-bootstrap-hover-color-for-links