Ändern der Schaltfläche Stil funktioniert nicht

Question

Ich benutze den vollen Kalender. Ich möchte den Standard, Hover oder aktiven Zustand für Schaltflächen in der Kopfzeile ändern.

Alles, was ich will es machen:

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

Der CSS-Code:

.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; 
} 

Aus irgendwelchen Gründen, die ich nicht verstehen kann, kann ich nicht den Stil dieser Tasten ändern.

Hier ist eine js Geige. JSFIDDLE

Bitte, kann mir jemand helfen!

EDIT, wenn ich so etwas wie dieses:

<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

Es ist ganz einfach, fügen Sie einfach diese CSS-Klassen:

.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; 
} 

Hier ist die Geige: fiddle link