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

Posted 2023-03-05

【中文标题】如何禁用链接的引导悬停颜色？

【英文标题】：How can I disable the bootstrap hover color for links?

【发布时间】：2013-04-11 15:24:34

【问题描述】：

我正在使用 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;

这不是一个好习惯。

【参考方案1】：

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

【参考方案2】：

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

【参考方案3】：

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

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

【参考方案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++) 

【讨论】：

加上一个迷人的黑客

【参考方案5】：

a background-color:transparent !important;

【讨论】：

也添加一些解释。

请考虑用一些额外的信息和理解来扩展您的答案。仅仅一段代码不太可能对未来的访问者有所帮助。

这无关紧要。 bootstrap 只添加文本颜色，而不是背景。

【参考方案6】：

我会选择this 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; 

【讨论】：

我问：“没有覆盖 :hover 为每个类”

好吧，我想从 bootstrap.css 中删除链接样式并根据需要重新设置样式会更好和更好的做法！

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

【参考方案7】：

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

a 
    color: inherit;

【讨论】：

我关心 wutzebaer...我关心

这继承了锚标记的父级颜色。它不只是抓住悬停之前的颜色吗？因此，要使其正常工作，他的标记必须是 <div class="yellow"><a>Link</a></div> 才能正常工作。对吗？

@Jackson_Sandland 关心

它对我不起作用。我也需要同样的东西。我在

就我而言，我需要background-color: inherit;，谢谢！

【参考方案8】：

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

【讨论】：

hm so color:none 是诀窍吗？我会试试的，但我现在在圣日=)

【参考方案9】：

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

它将覆盖默认引导悬停。

【讨论】：

这不是答案，bootstrap 说 hoovered 链接获得颜色 #005580，但我想覆盖这个颜色保持原样的定义