CSS覆蓋和活動按鈕

Question

我正在用jquery mobile構建移動應用程序。但是我的分段控制存在問題。像你可以看到here。

現在我想實現的是，當我選擇一個按鈕時，此按鈕的背景將獲得不同的背景顏色。

在這裏，你可以找到我的HTML

<div data-role="fieldcontain"> 
       <fieldset data-role="controlgroup" data-type="horizontal" > 
        <input type="radio" name="radio-view" data-icon="segment-titlestyle-segonly" id="segment1" value="choice1" checked="checked" /> 
        <label for="segment1" id="controls"><span class="ui-btn-text-controls">Iedereen</span></label> 
       <input type="radio" name="radio-view" data-icon="segment-titlestyle-segonly" id="segment2" value="choice2" /> 
        <label for="segment2" id="controls"><span class="ui-btn-text-controls">Team</span></label> 
        <input type="radio" name="radio-view" data-icon="segment-titlestyle-segonly" id="segment3" value="choice3" /> 
        <label for="segment3" id="controls"><span class="ui-btn-text-controls">Favorieten</span></label> 
       </fieldset> 

就像你可以看到我使用的背景ID控制。

#controls{ 
     background-color: #C0C0C0 !important; 
     border-color: black !important; 
    } 

#controls:overlay{ 
    background-color: #C0C0C0 !important; 
} 

但它不起作用。有人可以幫助我嗎？

親切的問候。

Answer 1

你第一件事不應該多次分配相同的ID改爲使用類。其次，如果您想根據選擇更改任何樣式，則需要創建一個類並通過jquery進行切換。你使用addClass和removeClass。

Answer 2

你可以很容易地用純CSS做到這一點。像這樣寫： -

#controls{ 
     background-color: #C0C0C0 ; 
     border-color: black ; 
    } 

    #controls:hover{ 
    background-color: red; 
    display:inline-block;  
    } 

input[type='radio']:checked + #controls{ 
    background:red; 
} 

請與我這個http://jsfiddle.net/Fa3rp/3/