CSS 오버레이 및 활성 버튼

Question

jquery 모바일을 사용하여 모바일 응용 프로그램을 구축하고 있습니다. 하지만 내 세그먼트 컨트롤에 문제가 있습니다. 당신은 here을 볼 수 있습니다.

이제 버튼을 선택하면이 버튼의 배경색이 다른 배경색이됩니다. 당신은 내가 배경의 ID 컨트롤을 사용하여 볼 수 있습니다처럼

여기 내 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> 

을 찾을 수 있습니다.

#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/