ボタンのスタイルが変更されない

Question

私は完全なカレンダーを使用しています。ヘッダーのボタンのデフォルト、ホバーまたはアクティブな状態を変更したい。

default: black background, white text color 
hover : red background color, white text color 
active: green background color, white text color 

CSSコード：：私はこれらのボタンのスタイルを変更することはできません理解できないいくつかの理由から

.fc-state-default { 
    color: white; 
    background-color: black; 
} 

.fc-state-active { 
    background-color: green; 
} 

.fc-state-hover { 
    background-color: red; 
    color: white; 
    border-color: black; 
    border-width: medium; 
} 

はすべて私はそれを作りたいです。

ここはjsのフィドルです。 JSFIDDLE

どうか、私を助けることができます！

EDIT私はこのようなものがある場合：

<div class="fc-right"> 
<div class="fc-button-group"> 
<button type="button" class="fc-month-button fc-button fc-state-default fc-corner-left fc-state-active">month</button> 
<button type="button" class="fc-agendaWeek-button fc-button fc-state-default">week</button> 
<button type="button" class="fc-agendaDay-button fc-button fc-state-default">day</button> 
<button type="button" class="fc-today-button fc-button fc-state-default fc-corner-right fc-state-disabled" disabled="disabled">today</button> 
</div> 
</div> 

Answer 1

をそれはちょうどこれらのCSSクラスを追加し、非常に簡単です：ここでは

.fc-button .fc-button-inner:hover { 
    background-color: red; 
    color: #fff; 
} 

.fc-button.fc-state-active .fc-button-inner { 
    background-color: green; 
    color: #fff; 
} 

.fc-button .fc-button-inner { 
    background-color: #000; 
    color: #fff; 
} 

はフィドルです：fiddle link