.tab-img-size {
width: 130px;
height: auto;
}
.tab-img-caption-color a:link {
color: #FFFFFF;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<ul class="nav nav-tabs">
<li class="nav active col-md-3"><a href="#water1" data-toggle="tab"><figure><img src="http://water1.ca/wp-content/uploads/2015/08/logo-3_05.png" class="tab-img-size center-block"><figcaption class="text-center"><h3 class="tab-img-caption-color">Water 1</h3></figcaption></figure></a></li>
<li class="nav col-md-3"><a href="#water2" data-toggle="tab"><figure><img src="http://water1.ca/wp-content/uploads/2015/08/logo-3_05.png" class="tab-img-size center-block"><figcaption class="text-center"><h3>Water 2</h3></figcaption></figure></a></li>
<li class="nav col-md-3"><a href="#water3" data-toggle="tab"><figure><img src="http://water1.ca/wp-content/uploads/2015/08/logo-3_05.png" class="tab-img-size center-block"><figcaption class="text-center"><h3>Water 3</h3></figcaption></figure></a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="water1">Content inside tab Water 1</div>
<div class="tab-pane fade" id="water2">Content inside tab Water 2</div>
<div class="tab-pane fade" id="water3">Content inside tab Water 3</div>
</div>
</div>
我正在尝试更改 <figcaption>
中的文本颜色(例如“Water 1”)当选项卡处于事件状态、非事件状态和悬停时。目前颜色分别为黑色、蓝色和深蓝色。
我添加了 .tab-img-caption-color
更改非事件颜色并尝试在 <h3>
上使用它(我也尝试了 <a>
中的每个元素)但它没有用。
最佳答案
在这里,我在悬停和事件状态下给出了红色。您可以根据需要更改颜色。
ul.nav-tabs li:hover h3, .nav-tabs li.active h3{
color:red;
}
关于html - Bootstrap 3 - 更改选项卡内的图形标题颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42017011/