hover 부모 변경 자식 자식

Question

다음 예제에서는 완전한 부모 div 위로 마우스를 가져 가면 상황이 내 자식 div에 발생합니다. 예를 들면 : 나는 child1의 h2와 span에 밑줄을 치고 child2의 span을 color에서 바꿀 것을 원한다.

순수 CSS에서 가능합니까? 아니면 JQuery 사용을 고려해야합니까? 그렇다면 Jquery에서이 작업을 시작할 수 있도록 도와 줄 수 있습니까?

  <div class="parent"> 
       <a href="#"> 
        <div class="child1"> 
         <h2>text</h2> 
         <span>text</span> 
        </div> 
        <div class="child2"> 
         <span>text</span> 
        </div> 
       </a> 
      </div> 

Answer 1

당신이 공중 선회 부모의 자녀 타겟팅 할 수 있습니다 그것은이 CSS로 가능합니다 :

.parent:hover .child1 span, .parent:hover .child1 h2 {text-decoration: underline;} 
.parent:hover .child2 span {color: red;} 

FIDDLE