CSS : 호버를 사용하여 다른 요소 속성을 적용 할 수 있습니까?

Question

해당 이미지 위에 마우스를 올리면 텍스트 링크 속성 (다른 색상 및 텍스트 장식 : 밑줄;)을 변경하려고합니다.

이

는 HTML이다

<!-- Wraps image, title, category --> 
       <div class="itemWrap"> 
        <!-- Item Image --> 
        <a href="#" class="itemImageLink"><img class="itemImage" src="img/thumb.png" alt="thumb"></a> 
        <!-- Item Title --> 
        <div class="itemTitle"> 
         <a href="#">The original soul of Michael Jackson</a> 
        </div> 
        <!-- Item Category --> 
        <div class="itemCat"> 
         <a href="#">12" Picture Disc</a> 
        </div> 
       </div><!-- close itemWrap --> 

은 (앵커 쌌다)를 가리키면 itemImage 때 .itemTitle 내의 링크의 속성은 변경 될 수 있다는 가능성이 있습니까?

웹 페이지에서 itemWrap이 여러 번 사용된다는 점에 유의해야합니다. 당신이 예 다음 :hover을 포함하면서 변경할 요소를 선택할 수 있습니다, 그래서 만약

감사

Answer 1

당신은 복합 선택 어디서나 :hover를 사용할 수 있습니다. 이 경우

, 예를 들어, 그것은 DOM을 되돌아 포함하기 때문에 당신은 정말 itemImage 함께 할 수는 없지만 itemImageLink으로 작업을 수행 할 수 있습니다

.itemImageLink:hover ~ .itemTitle { 
    ... 
} 

Answer 2

내 특정 문제를 해결하기 위해 관리 ,하지만 다른 사람들의 시도에 감사드립니다.

은 내가 형제 및 후손 셀렉터의 조합을 사용했다.

이미지 주위의 앵커에 psuedo :hover을 적용하고 다음 형제를 .itemTitle이라는 이름으로 선택한 다음 .itemTitle의 자손 .itemTitleLink으로 선택했습니다.

.itemImageLink:hover ~ .itemTitle > .itemTitleLink {color:#CD3333;text-decoration:underline;} 

<a href="#" class="itemImageLink"> 
<div class="itemTitle"><!-- sibling of .itemImageLink --> 
    <a href="#" class="itemTitleLink">Link</a><!-- descendant of .itemTitle --> 
</div>