CSS가 활성 상태 일 때 다른 요소의 스타일 변경

Question

순수 HTML/CSS를 사용하여 다른 이미지 (이미지 갤러리 뷰어)를 클릭하여 이미지 내용을 변경하려고합니다.

나는 gumby.cssframework을 사용하여 현재 다음과 같은 HTML이 오전 :

<section id="sect"> 
    <div class="three columns"> 
     <img src"/images/help.png"> 
    </div> 
    <div class="one column"> 
     <img src"/images/help.png"> 
    </div> 
</section> 

그리고 다음과 같은 CSS를 :

완벽하게 #sect .three.columns img:hover 작품의 첫 번째 CSS 규칙, 내가 선택한 나타내는

#sect .three.columns img:hover { 
    content:url("/images/about.png"); 
    border: 5px solid red; 
} 

#sect .one.column img:active ~ #sect .three.columns img { 
    content:url("/images/about.png"); 
    border: 5px solid red; 
} 

오른쪽 요소. 그러나 두번째 것 #sect .one.column img:active ~ #sect .three.columns img는 활동에 아무것도를하지 않는다.

~의 의미는 here을 참조하십시오.

누구든지 아이디어가 있습니까?

감사합니다.

Answer 1

의견에서 언급했듯이 현재 구현중인 방식으로는 불가능합니다.

CSS 규칙은 종속성의 정도에 따라 달라지며 DOM을 트래버스 할 수 없습니다. 말하자면 한 부모 레벨을 오름차순으로 이동 한 다음 가로 질러 움직입니다. 형제 자매들과 아이들 만 식별 할 수 있습니다.

content 스타일도 :before 및 :after 의사 요소 만 사용할 수 입니다.

따라서, 대안은 background-image하지 content 속성 예를 들어 자식 이미지를 제거하고, 참조, 부모 요소의 active 상태로 작업을 적용하는 것입니다 :

Demo Fiddle

HTML을

<section id="sect"> 
    <div class="three columns"></div> 
    <div class="one column"></div> 
</section> 

CSS

.column, .columns { 
    height:200px; 
    width:200px; 
    background-image:url(http://phaseoneimageprofessor.files.wordpress.com/2013/07/iqpw29_main_image_.jpg); 
    background-size:cover; 
} 
.three.columns:hover ~ .one.column { 
    border:1px solid red; 
    background-image:url(http://upload.wikimedia.org/wikipedia/commons/9/9c/Image-Porkeri_001.jpg); 
}