2017-02-03 6 views
0

ブートストラップ3 - タブ内の変更figcaption色

.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>(例えば「水1」)内のテキストの色を変更しようとしている非アクティブな、としていますホバー。現在、色はそれぞれ黒、青、濃紺です。

無効な色を変更するために.tab-img-caption-colorを追加し、<h3>で使用しようとしました(私も<a>の中のすべての要素を試しましたが)うまくいきませんでした。

+0

。テキストの色は1 2 3のようにタブの変更が変わりますか? –

+0

@sahildhirは、(アクティブ、ホバー、またはアクティブでない)テキストの色を、デフォルトのものの代わりに必要なものに変更します。 – AceVez

答えて

1

ここでは、ホバーとアクティブな状態で赤い色を付けました。必要に応じて色を変更することができます。あなたが実際に達成したいん何

Fiddle Demo

ul.nav-tabs li:hover h3, .nav-tabs li.active h3{ 
    color:red; 
} 
+0

甘い。これは私が探しているものです、ありがとう。しかし、「ホバー」は「」ではないでしょうか? – AceVez

+0

あなたは実際にbootstrapプラグインを使うことができます。cssはfiddle cssよりも優先順位を与えています。今度は 'color:red!important;'を入れてください。このデモのhttps://jsfiddle.net/pssw66t6/4/は完璧に機能します。私はちょうど '!important'を使用したくないのでその理由があります。 – locateganesh

関連する問題