Question

我正在尝试将开关的背景颜色更改为绿色。我认为我已经完成了所有事情，但背景只是保持灰色。

我做错了什么？

$('.slider-button').toggle(function(){
    $(this).addClass('on').parent().next('input[type="checkbox"]').attr('checked', 'checked');
    $('.slider-frame').addClass('green');
},function(){
    $(this).removeClass('on').parent().next('input[type="checkbox"]').removeAttr('checked');
    $('.slider-frame').removeClass('green');
});

提前致谢。

Answer 1

添加样式

#stage .slider-frame.green {
    background-color: #5fca42 !important;
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,.4), inset 0 1px 3px rgba(0,0,0,.32), inset 0 0 3px rgba(0,0,0,.12);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.4), inset 0 1px 3px rgba(0,0,0,.32), inset 0 0 3px rgba(0,0,0,.12);
    box-shadow: 0 1px 0 rgba(255,255,255,.4), inset 0 1px 3px rgba(0,0,0,.32), inset 0 0 3px rgba(0,0,0,.12);
    background-image: -webkit-linear-gradient(bottom, #5fca42 0%, #5fca42 0.27%, #d8d8d8 100%);
}

演示：Fiddle

Answer 2

如果您更改以下内容，则其工作正常：

#stage .slider-frame.green {
    background: #5fca42 !important;
}

所以基本上只是background:而不是background-color:

更新了小提琴：http://jsfiddle.net/84Qkz/2/

Answer 3

你需要将它添加到你的CSS中。这将阻止您当前获得的覆盖

#stage .slider-frame.green {
    background-image:none;
}

Answer 4

此CSS将解决您的问题

#stage .slider-frame.green {
    background-color: #5fca42 !important;
    background-image: -moz-linear-gradient(bottom, #5fca42 0%, #5fca42 0.27%, #d8d8d8 100%);
    background-image: -o-linear-gradient(bottom, #5fca42 0%, #5fca42 0.27%, #d8d8d8 100%);
    background-image: -webkit-linear-gradient(bottom, #5fca42 0%, #5fca42 0.27%, #d8d8d8 100%);
    background-image: linear-gradient(bottom, #5fca42 0%, #5fca42 0.27%, #d8d8d8 100%);
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,.4), inset 0 1px 3px rgba(0,0,0,.32), inset 0 0 3px rgba(0,0,0,.12);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.4), inset 0 1px 3px rgba(0,0,0,.32), inset 0 0 3px rgba(0,0,0,.12);
    box-shadow: 0 1px 0 rgba(255,255,255,.4), inset 0 1px 3px rgba(0,0,0,.32), inset 0 0 3px rgba(0,0,0,.12);
z-index:9999999;
}

Answer 5

您将.slider-button的颜色定义为白色。
.slider-button嵌套在.slider-frame内。
slider-frame会获得额外的CSS规则，使其成为绿色
绿色未显示，因为其中元素的背景颜色仍为白色。

...解

更改

#stage .slider-frame.green {....}

为...

#stage .slider-frame.green .slider-button {....}

因此，您现在正在更改.slider-button的颜色，而不是.slider-frame

Fiddle me this.

jQuery幻灯片切换复选框无法更改背景颜色

5 个答案: