사용자 지정 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>

피커는 구성 요소의 HTML 스타일 사용자 정의를 simplyfy하는 검사 수있는 debug 옵션을 가지고

참고.

P. 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의 기본 사항을 살펴보십시오.