HTML + CSS의 다른 요소로 요소의 속성 값을 변경하는 방법?

Question

두 개의 요소 버튼이 있는데 다른 버튼을 클릭하면 하나의 색을 변경하고 그 반대의 경우도 마찬가지입니다. 나는 그것을 시도했지만 작동하지 않습니다. 누구든지 나를 도울 수 있습니까? HTML :

<button id="t1">Test 1</button> 
<button id="t2">Test 2</button> 

CSS :

#t1:active + #t2 
{ 
    color: red; 
} 
#t2:active + #t1 
{ 
    color: red; 
} 

Answer 1

완전히 "성실하지는 않지만"CSS 만 사용하여 이것을 달성 할 수있는 몇 가지 방법이 있습니다.

첫 번째 방법은 첫 번째 단추의 "가짜"복제본을 만들고 두 번째 단추가 :active, 데모 : little link 일 때 표시하는 방법에 의존합니다.

두 번째 방법은 button 중 하나가 :active 일 때 그 뒤에있는 부모 요소가 :active이기 때문에 의존합니다. 이 솔루션의 데모는 little link입니다.

Answer 2

형제 (이전 형제로부터 나중에 형제에) 한 방향으로 만 일을 콤비로 더 반대가 없다. 즉, CSS를 사용하면 #t1을 클릭 할 때 #t2 만 변경할 수 있지만 #t2을 클릭하면 #t1을 클릭 할 수 없습니다. 또한, > is the child combinator, 형제 조합 자 아닙니다.

두 가지 방법으로 작동하는 데 동일한 동작이 필요한 경우 :active 선택기 대신 JavaScript mousedown 이벤트를 사용해야합니다.