[英]jQuery slide toggle checkbox cant change background colour
我打算在打开时将切换的背景颜色更改为绿色。 我想我已经做好了一切,但背景只是保持灰色。
我究竟做错了什么?
$('.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');
});
提前致谢。
添加样式
#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%);
}
演示: 小提琴
如果您更改以下内容,其工作原理如下:
#stage .slider-frame.green {
background: #5fca42 !important;
}
所以基本上只是background:
而不是background-color:
更新小提琴: http : //jsfiddle.net/84Qkz/2/
你需要将它添加到你的CSS。 这将阻止您当前获得的覆盖
#stage .slider-frame.green {
background-image:none;
}
这个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;
}
.slider-button
的颜色定义为白色。 .slider-button
嵌套在.slider-frame
。 slider-frame
被赋予了额外的CSS规则,使其变为绿色 解...
更改
#stage .slider-frame.green {....}
至...
#stage .slider-frame.green .slider-button {....}
所以你现在正在改变.slider-button
的颜色,而不是.slider-frame
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.