jQuery幻灯片切换复选框不能更改背景颜色

我试图改变开关的背景色为绿色。我认为我做的一切都正确，但背景只是灰色。jQuery幻灯片切换复选框不能更改背景颜色

我在做什么错？

$('.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'); 
});

在此先感谢。

来源

2013-06-26 Jack Barham

Your style'background-image：-webkit-linear-gradient（bottom，＃e2e2e2 0％，＃e2e2e2 0.27％，＃d8d8d8 100％）;'是重写背景颜色 –

一个建议..改变外圈的colour.look的优雅。 –

添加样式

#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

来源

2013-06-26 09:08:39

谢谢你，我用正确的CSS更新了小提琴 –

这并不能解释你为什么需要改变它。 OP问他在做什么错......不仅仅是如何解决它:) – Doug

@Doug我为问题添加了一条评论 –

如果更改下面的工作：

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

所以基本上只是background:代替background-color:

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

来源

2013-06-26 09:12:31 Chris

您需要将此添加到您的CSS。这将防止目前你正在

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

来源

2013-06-26 09:13:38

的覆盖这个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; 
}

来源

2013-06-26 09:17:19 mohkhan

您正在定义的.slider-button颜色为白色。
.slider-button嵌套在.slider-frame内。
slider-frame给出了额外的CSS规则，使其绿色
绿色没有显示，因为其中的元素的背景颜色仍然是白色。

解决方案...

变化

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

为... .slider-button颜色

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

所以，你正在改变，不.slider-frame

Fiddle me this.

来源

2013-06-26 09:17:39 Doug

感谢您的回复，它实际上是我想要的背景（或滑块区域）改变按钮颜色本身。我现在用正确的代码更新了我的小提琴。再次感谢。 –

jQuery幻灯片切换复选框不能更改背景颜色

回答

相关问题