CSS 선택기가 JavaScript없이 페이지의 다른 요소에 영향을 미칠 수 있습니까? [복제하다

StackOverflow https://stackoverflow.com/questions/1824030

  •  22-07-2019
  •  | 
  •  

문제

이 질문은 이미 여기에 답이 있습니다.

예를 들어, 두 개의 텍스트 상자가 초점을 맞추면 같은 스타일을 갖고 싶습니다.

<div class="divTxt">
    <input type="text" id="a" class="a" />
    <input type="text" id="b" class="b" />
</div>

그리고 CSS는 다음과 같습니다.

.a:focus 
{
    background-color:Blue;
}
.b:focus 
{
    background-color:Yellow;
}

내가 필요로하는 것은 A의 배경색 : B가 집중 될 때 노란색을 만들고 그 반대도 마찬가지입니다. 가능성이 있습니까? 정말 감사합니다.

도움이 되었습니까?

해결책

당신은 시도 할 수 있습니다 일반 형제 자매 선택기 (~) 입력 상자가 서로 옆에있는 경우.

같은 것 :

.a:focus {    background-color:Blue;}
.a:focus~.b {    background-color:Blue;}
.b:focus {    background-color:Yellow;}
.b:focus~.a {    background-color:Yellow;}

참고 : 완전히 테스트되지 않은 상태로 어둠 속에서 찌르기!

다른 팁

JavaScript가 비활성화 된 경우 텍스트 상자 스타일을 알 수 없습니다. 

.chk1:focus{
   background-color:Blue;
}
.chk2:focus{
   background-color:Yellow;
}

텍스트 feilds

<input class=chk1 type=text id="a">
<input class=chk2 type=text id="b">

이것은 Firefox와 잘 작동하지만 IE6에 문제가있을 수 있습니다. IE6에 대한 CSS 문제 초점

IE와 함께 작동하기를 원한다면 JavaScript를 사용하고 싶을 수도 있습니다 !!

도움이 되었기를 바랍니다

RDJ

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top