CSS Overlay und aktive Tasten

Question

Ich baue eine mobile Anwendung mit jquery mobile. Aber ich habe ein Problem mit meiner Segmentkontrolle. Wie Sie sehen können here.

Nun, was ich erreichen möchte ist, dass, wenn ich eine Schaltfläche auswähle, der Hintergrund von dieser Schaltfläche eine andere Hintergrundfarbe bekommt.

Hier können Sie meine 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> 

finden wie Sie mich für den Hintergrund, um den ID-Steuerelemente verwenden zu sehen.

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

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

Aber es funktioniert nicht. Kann mir jemand helfen?

Mit freundlichen Grüßen.

Answer 1

Allererste, was Sie sollten nicht mehr als einmal die gleiche ID zuweisen Klasse statt. Zweitens, wenn Sie einen beliebigen Stil basierend auf der Auswahl ändern möchten, müssen Sie eine Klasse erstellen und durch jquery wechseln. Sie verwenden addClass und removeClass.

Answer 2

Sie können dies sehr einfach mit reinem CSS tun. Schreiben wie folgt aus: -

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

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

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

prüfen diese http://jsfiddle.net/Fa3rp/3/