Question

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

<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

Answer 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>

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

Answer 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 < /强>

出于某种原因，代码没有在stackoverflow中运行，但它在jsfiddle中正常工作。

希望这会对你有所帮助。

更改Bootstrap链接和按钮组件的活动按钮的颜色

2 个答案: