カスタムdatetimepickerホバーの色

Question

デフォルトでは、DateTimePickerのテーブルとボタンのホバリングカラーはグレーで、カスタムカラーに変更するにはどうすればいいですか？私は以下のCSSコードを試してみましたが、何も起こりません。ここで

.bootstrap-datetimepicker-widget table td.active:hover{ 
    background-color: #337ab7; 
    color:#fff; 
} 
.bootstrap-datetimepicker-widget button:hover{ 
    background-color: #337ab7; 
    color:#fff; 
} 

Answer 1

ボタンは<button>要素ではないため、CSSルールが一致しないという問題があります。

アトリビュートdata-actionを使用すると、ボタンエレメントを選択して色を設定できます。

ここでは、閉じるボタンのライブ例を示します。

$('#datetimepicker1').datetimepicker({ 
 
    useCurrent: false, 
 
    format: "YYYY/MM/DD HH:mm ZZ", 
 
    //locale: "ja", 
 
    sideBySide: true, 
 
    toolbarPlacement: "bottom", 
 
    showClose: true, 
 
    icons: { 
 
     close: 'closeText' 
 
    } 
 
});

.closeText:before { 
 
    content: "Close"; 
 
} 
 

 
.bootstrap-datetimepicker-widget table td a[data-action="close"]>span:hover { 
 
    /* Set her your custom color */ 
 
    background-color: #337ab7; 
 
    color: #fff; 
 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<div class='input-group date' id='datetimepicker1'> 
 
    <input type='text' class="form-control" /> 
 
    <span class="input-group-addon"> 
 
    <span class="glyphicon glyphicon-calendar"></span> 
 
    </span> 
 
</div>

ピッカーを使用して、スタイルのカスタマイズをsimplyfyするコンポーネントのHTMLを調べることができますdebugオプションを持っていることに注意してください。

P.S.私はyour previous questionから始まるサンプルを設定しました。

Answer 2

あなたが行く：

.bootstrap-datetimepicker-widget table td.day:hover, 
.bootstrap-datetimepicker-widget table td.hour:hover, 
.bootstrap-datetimepicker-widget table td.minute:hover, 
.bootstrap-datetimepicker-widget table td.second:hover { 

    background-color: #123456; // Your custom color 

} 

PS。 Chrome DevToolsの基本を見てください。