첫 번째 Div 활성화에 대한 호버 효과 : 두 번째 Div의 요소 뒤에

Question

한 div에 두 번째 div에 배치 된 :: after 요소를 활성화하는 호버 효과가 필요합니다. 여기

내 코드 :

a{ 
 
    color:green; 
 
} 
 
     
 
div.one:hover div.two::after { 
 
    color: red; 
 
    content:"Zusatztext"; 
 
}

<a href="#"> 
 
     <div class="one"> 
 
     Text1 
 
     </div> 
 
     <div class="two"> 
 
     Text2 
 
     </div> 
 
    </a> 
 
    
 

내 생각 엔 두 번째 DIV 오른쪽 첫 번째 DIV의 하위 요소가 아니기 때문에 작동하지 않습니다입니까?

(링크)에 : 호버 효과를 적용 할 수 있으며 작동합니다.

a:hover div.two::after { 
     color: red; 
    content:"Zusatztext"; 
} 

종류의 안부 밀라노

Answer 1

당신이 찾고있는 결과를 달성 선택기 사이 + 추가 : 여기

이 작업을 수행합니다. Adjacent sibling combinator

~ 사이에 더 많은 요소를 추가해야하는 경우 형제가 첫 번째 요소 바로 뒤에있는 경우 작동합니다. General sibling combinator

이 시도 :

a{ 
 
    color:green; 
 
} 
 

 
div.one:hover + div.two::after { 
 
     color: red; 
 
    content:"Zusatztext"; 
 
}

<a href="#"> 
 
    <div class="one"> 
 
    Text1 
 
    </div> 
 
    <div class="two"> 
 
    Text2 
 
    </div> 
 
</a>