CSS 선택기를 사용하여 div 앞에 div를 선택하는 방법

Question

좋아요, 그래서 두 개의 div가 있습니다 : "imgforplaces_thumbnailwrapper"및 "checkbutton". "imgforplaces_thumbnailwrapper"에 마우스를 가져 가면 "imgforplaces_thumbnailwrapper"와 "checkbutton"이 모두 불투명도 0.5로 변경됩니다. "checkbutton"으로 마우스를 가져 가면 "checkbutton"이 불투명도 1로 변경되고 "imgforplaces_thumbnailwrapper"불투명도는 0.5로 변경됩니다.

"imgforplaces_thumbnailwrapper"를 가리키면 잘 작동하지만 "checkbutton"으로 마우스를 가져 가면 "imgforplaces_thumbnailwrapper"가 불투명도 0.5로 변경되지 않습니다! 이제는 CSS가 이전 선택기를 가지고 있지 않은 이유가 무엇인지 알았습니다. 어떻게 자바 스크립트를 사용하여이 작업을 수행 할 수 있습니까? 내가 "imgforplaces_thumbnailwrapper"에 마우스를 가져 가면 :주의 할

.imgforplaces_thumbnailwrapper:hover { 
    opacity: 0.5; 
    } 

.imgforplaces_thumbnailwrapper:hover ~ .checkbutton { 
    opacity: 0.5; 
} 

.checkbutton:hover { 
    opacity: 1; 
}  

.checkbutton:hover ~ .imgforplaces_thumbnailwrapper { //this will not work because previous selector is not available 
    opacity: 0.5; 
} 

것들의 가치는 내가 "체크 버튼은"(없음 원래 디스플레이) 표시됩니다있는 자바 스크립트 가져가 기능을 쓴 것입니다.

echo '<div class=container>'; 
echo '<div class=imgforplaces_thumbnailwrapper>'; 
     echo "<a class='ajax' href='image_color_box.php?id=".$row['id']."' title='Home'>"; 
     echo "<img src='../imgforplaces_thumbnail/" . $row['location_name'] . ".png' />"; 
     echo '</a>'; 
     echo '</div>'; 
     echo '<div class=checkbutton><img src="../images/haventchecked.png" /></div>'; 
echo '</div>'; //end div container 

Answer 1

시도는 두 요소 사이에 공유되는 공통 클래스를 추가, "sharedclass"를 호출 할 수 있습니다 :

내 div의 (이 잘 작동). 그런 다음 CSS를 시도 : 그것은 50 %의 불투명도를 덮어 쓸 가능성이

.sharedclass:hover{ 
    opacity:0.5; 
} 
.checkbutton:hover{ 
    opacity:1; 
} 

는 sharedclass 규칙 후 체크 버튼 규칙을 배치해야합니다.

Answer 2

~ 사용중인 CSS 선택기는 다음에 오는 과 일치하는 형제를위한 것입니다. 따라서 .imgforplaces_thumbnailwrapper은 .checkbox보다 먼저 오기 때문에 .checkbutton:hover ~ .imgforplaces_thumbnailwrapper은 예상대로 작동하지 않습니다.

이 CSS Tricks 문서는 일반적인 형제 조합에 대해 자세히 설명합니다.