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

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样式？（这个问题并不一定依赖于Bootstrap）。

我需要类似以下的内容：

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

我认为

.yellow {
    color: yellow !important;
}

这不是一个好的做法。

- wutzebaer

Answer 1

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

a {
    color: inherit;
}

- wutzebaer

---

我关心你，无论发生什么......我都会关心。 - zero_cool

这会继承锚点标签的父元素颜色。它并不只是获取悬停前的颜色，对吗？所以为了让它起作用，他的标记必须是<div class="yellow"><a>链接</a></div>。这正确吗？ - arjabbar

它对我没有用。我也需要同样的东西。我在<a href>标签内部有一个img，当我悬停时不应该发生任何事情。我得到了一些默认的悬停颜色。 - Ziggler

在我的情况下，我需要使用 background-color: inherit;，谢谢！ - Ultimater

如果你在意并且这个方法对你无效：添加 !important。 - Vlusion

Answer 2

我会选择类似这个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

---

我问道：“不用覆盖每个单独类的:hover？” - wutzebaer

我想最好的做法是从bootstrap.css中删除链接样式，并按照您的要求重新设置样式！ - Mahmoud

可能需要添加 !important; 以防万一。 - Sagi

Answer 3

a {background-color:transparent !important;}

- Ritz Mitchell Dacanay

---

add some explanations too. - Shree Krishna

请考虑在您的回答中添加一些额外的信息和理解。仅仅提供一块代码是不太可能对未来的访问者有所帮助的。 - Magisch

这是不相关的。Bootstrap 只添加文本颜色，而不是背景。 - Amit

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++) {}

- Mikael Lepistö

---

加一分给一个迷人的黑客 - ericpeters0n

我会为一个丑陋的黑客攻击写更多的代码 :P - alexwenzel

Answer 5

对于我来说，以上的简单解决方案都没有起作用，但是通过仅更改悬停效果，我成功使其工作：

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

- The Coder

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/

- tatlar

---

哦，那么color:none就是诀窍？我会尝试的，但现在我正在度假中 =) - wutzebaer

Answer 7

将 color: #005580; 修改为 color: #005580 !important;。

这会覆盖默认的bootstrap hover样式。

- Harpreet

---

这不是答案。Bootstrap说，被悬停链接的颜色为#005580，但我想覆盖这个定义，使颜色保持不变。 - wutzebaer

Answer 8

如果您仍在寻找超过8年的问题的答案，那么Bootstrap自v4.2以来就具有.text-reset类来处理这种情况（基本上实现了wutzebaer的答案）。请参阅此处的文档。

- Spider Qshka

Answer 9

如果你想为链接设置默认颜色，但仍然使用wutzebaer answer，请尝试以下方法：

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>

- Ali Sheikhpour

Answer 10

你可以通过使用CSS变量来实现这一点。

通过将你的颜色类更改为：

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

你可以在hover/focus类中引用这个变量，以覆盖默认行为。

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

如果元素上没有分配变量的类，这将默认为color: unset;。

您可以通过声明全局默认值或悬停类中的备用方案来设置一些保护措施。

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

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

- B B