Bootstrap 3 - Änderung figcaption Farbe innerhalb einer Registerkarte
.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>
Ich versuche, die Farbe des Textes innerhalb <figcaption>
(zB „Water 1“) zu ändern, wenn die Registerkarte aktiv, inaktiv ist, und schweben. Momentan ist die Farbe Schwarz, Blau bzw. Dunkelblau.
Ich habe .tab-img-caption-color
die inaktive Farbe zu ändern und versuchte es auf <h3>
(ich versuchte, innen <a>
jedes Element auch) zu verwenden, aber es hat nicht funktioniert.
Was wollen Sie eigentlich erreichen. Wie ändert sich die Farbe von Text water1 2 3 bei Tab-Wechsel? –
@sahildhir Ändere die Farbe des Textes (wenn aktiv, schwebend oder inaktiv) in das, was ich möchte anstelle des Standardtexts. – AceVez