57

我正在使用引导程序。

引导程序定义

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

我有这个链接/CSS-classes

<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;
}

不是一个好习惯。

4

9 回答 9

174

如果有人在乎，我最终得到：

a {
    color: inherit;
}
于 2013-08-27T08:48:43.377 回答
14

我会选择这样的 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; }
于 2013-04-18T13:32:49.040 回答
9 
a {background-color:transparent !important;}
于 2016-03-03T05:17:32.990 回答
3

对我来说，上述简单的解决方案都不起作用，但是通过只改变悬停我就能让它工作：

  :hover {
    color: inherit;
    text-decoration: none;
  }
于 2020-01-21T03:49:16.480 回答
2

如果您喜欢在现实世界系统中永远不应该做的丑陋黑客行为；您可以从 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++) {}
于 2013-11-05T10:56:23.493 回答
1

我不是 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/

于 2013-07-17T18:46:54.330 回答
1

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

它将覆盖默认引导悬停。

于 2013-04-18T13:25:33.420 回答
1

如果您想为链接设置默认颜色但继续使用wutzebaer 答案，请尝试以下操作：

body a {
    color:pink; /*this is the default link color*/
}
a {
  color:inherit;
}
.green {
  color:green
}
.red {
  color:red
}
<a class="green">Green</a>
<a class="red">Red</a>
<a>Default</a>

于 2021-03-10T06:03:10.813 回答
1

如果由于某种原因您仍在寻找超过 8 年历史的问题的答案 - 自 v4.2 以来.text-reset的 Bootstrap 具有此用例的类（基本上实现了 wutzebaer 答案）。在此处查看文档

于 2021-09-20T10:11:09.840 回答