[英]jQuery slide toggle checkbox cant change background colour
I am trying to change the background colour of the toggle to green when it is turned on. 我打算在打开时将切换的背景颜色更改为绿色。 I think I have done everything correctly, but the background just stays grey.
我想我已经做好了一切,但背景只是保持灰色。
What am I doing wrong? 我究竟做错了什么?
$('.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');
});
Thanks in advance. 提前致谢。
Add the style 添加样式
#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%);
}
If you change the following, its working: 如果您更改以下内容,其工作原理如下:
#stage .slider-frame.green {
background: #5fca42 !important;
}
So basically just background:
instead of background-color:
所以基本上只是
background:
而不是background-color:
Updated fiddle: http://jsfiddle.net/84Qkz/2/ 更新小提琴: http : //jsfiddle.net/84Qkz/2/
you need to add this to your css. 你需要将它添加到你的CSS。 This will prevent the override you are currently getting
这将阻止您当前获得的覆盖
#stage .slider-frame.green {
background-image:none;
}
This CSS will solve your problem 这个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
as white. .slider-button
的颜色定义为白色。 .slider-button
is nested inside .slider-frame
. .slider-button
嵌套在.slider-frame
。 slider-frame
is given the additional CSS rule that makes it green slider-frame
被赋予了额外的CSS规则,使其变为绿色 Solution... 解...
Change 更改
#stage .slider-frame.green {....}
to... 至...
#stage .slider-frame.green .slider-button {....}
So you are now changing the colour of .slider-button
, not .slider-frame
所以你现在正在改变
.slider-button
的颜色,而不是.slider-frame
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.