如何禁用链接的引导悬停颜色？

Question

我正在使用 Bootstrap。

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

这不是一个好的做法。

Answer 1

如果有人关心我最终会得到：

a {
    color: inherit;
}

Answer 2

Answer 3

a {background-color:transparent !important;}

Answer 4

如果你喜欢在现实世界的系统中永远不应该做的丑陋的黑客行为；您可以从 document.styleSheets 中删除所有 :hover 样式规则。

只需使用 JavaScript 浏览所有 CSS 样式并删除选择器中包含“:hover”的所有规则。当我需要从 bootstrap 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++) {}

Answer 5

对我来说，上面的简单解决方案都不起作用，但是通过仅更改悬停，我能够让它工作：

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

Answer 6

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

Answer 7

将

color: #005580;

标记为

color: #005580 !important;

。

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

Answer 8

如果您想为链接设置默认颜色但继续使用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>

Answer 9

如果出于某种原因，您仍在寻找超过 8 年历史的问题的答案 - 自 v4.2 以来的 Bootstrap 为该用例提供了

.text-reset

类（基本上实现了 wutzebaer 答案）。请参阅文档此处

Answer 10

您可以使用 CSS 变量来实现这一点。

将颜色类别更改为：

.yellow {
    color: yellow;
    --color: yellow;
}

然后您可以在悬停/焦点类中引用此变量来覆盖默认行为：

a:hover, a:focus {
    color: var(--color);
}

如果分配变量的元素上没有类，则默认为

color: unset;

。

您可以通过声明全局默认值或悬停类中的回退来设置一些保护措施：

:root {
    --color: default-color;
}

a:hover, a:focus {
    color: var(--color,fallback-color);
}