更改按钮样式无效

时间:2016-07-12 17:48:29

标签: javascript jquery html css

我正在使用完整日历。我想更改标题上按钮的默认,悬停或活动状态。

我想要它做的全部:

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

由于某些原因我无法理解我无法改变那些按钮的样式。

这是一个小提琴手。 JSFIDDLE

拜托,有人可以帮助我!

编辑,如果我有这样的事情:

<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>

1 个答案:

答案 0 :(得分:8)

这很简单,只需添加这些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