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幻燈片切換複選框不能更改背景顏色

回答

相關問題