1

我试图在打开时将切换的背景颜色更改为绿色。我想我做的一切都是正确的，但背景只是保持灰色。

我究竟做错了什么？

这是我的小提琴

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

提前致谢。

4

5 回答 5

2

添加样式

#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%);
}

演示：小提琴

于 2013-06-26T09:08:39.623 回答
1

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

#stage .slider-frame.green {
    background-image:none;
}
于 2013-06-26T09:13:38.390 回答
1

如果您更改以下内容，它的工作：

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

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

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

于 2013-06-26T09:12:31.680 回答
0

这个 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-26T09:17:19.037 回答
0
  1. 您将颜色定义.slider-button为白色。
  2. .slider-button嵌套在里面.slider-frame。
  3. slider-frame被赋予了使其变为绿色的附加 CSS 规则
  4. 绿色没有显示，因为其中元素的背景颜色仍然是白色。

解决方案...

改变

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

至...

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

所以你现在正在改变 的颜色.slider-button，而不是.slider-frame

摆弄我这个。

于 2013-06-26T09:17:39.093 回答