更改引导链接和按钮组件的活动按钮的颜色答案

【问题标题】：Change color for active button of Bootstrap Links and Buttons component更改引导链接和按钮组件的活动按钮的颜色
【发布时间】：2018-02-05 02:43:09
【问题描述】：

您好，我使用 Bootstrap Links and buttons

我正在尝试更改活动按钮突出显示的颜色，当鼠标悬停在按钮上时会出现，默认情况下白色为不同颜色：

<div class="container">
    <div class="row">
      <div class="col-md-6 col-sm-12">
        <div class="list-group">
          <h2><a href="#" class="list-group-item active">
          <strong>T E X T</strong></a>
           <a href="page1.html" class="list-group-item list-group-item-action"> Link 1 </a>              
            <a href="page2.html" class="list-group-item list-group-item-action"> Link 2 </a>                    
        </div>
      </div>
    </div>
</div>

我已经尝试过，因为它在这个answer to the same question whit css 中显示，因为我的程序集中没有 scss/bootstrap.scss 只有 _bootstrap-overrides.scss

至此 bootstrap.css 结束：

 a {color: #8cf1dd;}
 a:hover {color: #e9d214;}

并进入带有 Bootstrap 链接和按钮组件的 HTML 的<head>：

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
.card .nav-link {color: #8cf1dd;}
.card .nav-link:hover {color: #e9d214;}    
</style>

但颜色相同，我想要something like this

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

jsfiddle link

.change-color .list-group-item:not(.active):hover {
  background-color: #00ff73 ;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
      <div class="col-md-6 col-sm-12">
        <div class="list-group change-color">
         <a href="#" class="list-group-item active">
          <strong>T E X T</strong></a>
           <a href="page1.html" class="list-group-item list-group-item-action"> Link 1 </a>              
            <a href="page2.html" class="list-group-item list-group-item-action"> Link 2 </a>                    
        </div>
      </div>
    </div>
</div>

在您的问题中，在编辑之前，不清楚您要更改背景，您说要更改颜色。这是编辑后的答案。

【讨论】：

你好，我试过了，有点改变页面的整体视觉配置，并且不会改变这里的活动按钮链接颜色i.stack.imgur.com/vTa8e.png
我不明白你在说什么，但如果a 影响了整个页面，请使用.list-group a 之类的东西或向list-group 添加一个额外的类并使用该类来改变颜色，例如。 .change-color a{color: #8cf1dd !important;} 。这是我的答案imgur.com/a/VIdeN 的屏幕截图，显然活动按钮颜色正在变化。如果你能更具体一点，那将是有益的
不，这里是我想把白色变成绿色的颜色，请查看i.stack.imgur.com/AvZli.png

【解决方案2】：

这里有一个解决方案https://jsfiddle.net/a29696xg/7/

.list-group-item-action:hover {background: #95f507;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
      <div class="col-md-6 col-sm-12">
        <div class="list-group">
          <h2><a href="#" class="list-group-item active">
          <strong>T E X T</strong></a></h2>
           <a href="page1.html" class="list-group-item list-group-item-action"> Link 1 </a>              
            <a href="page2.html" class="list-group-item list-group-item-action"> Link 2 </a>                    
        </div>
      </div>
    </div>
</div>

在CSS中，如果你定位anchor标签，那么所有的锚标签都会生效，而不是定位到一个特定的class.list-group-item-action。。 p>

由于某种原因，代码没有在 stackoverflow 中运行，但在 jsfiddle 中运行良好。

希望这会对你有所帮助。

【讨论】：

你好，是的，很好的支持，这段代码唯一的问题，访问的链接保持白色
用于更改访问链接的颜色.list-group-item-action:visited {background: #95f507;}
对不起，我的意思是点击的按钮保持蓝色没有被访问。
.list-group-item-action:active {background: #95f507;}
好吧，不知道我做错了什么，代码在本地负载上运行良好，但是当我上传 html 并将更新的 bootstrap.min.css 覆盖到我的主机时，颜色是相同的默认值跨度>