[HTML/CSS] hover 이벤트시 다른 클래스, id 에도 효과를 주는 법

 

이런 식으로 가장 바깥의 div에는 item-area를

그 속에는 class="card"가 반복되는 구조를 하고 있는 코드가 있습니다.

여기에서 class="card"에 hover 이벤트로 color=#666 을 줘도 반영되지 않습니다. 

이는 지금 프로젝트에서 기본 값으로 a 태그 자체에

text-decoration: none;

color: black;

을 주었기 때문인데요 이런 경우에는 

.item-area .card:hover + .item-area a{
    color: #666;
}

 

이런 식으로 + 선택자로 같이 지정을 해주면 자연스럽게 원하던 hover 효과를 구현할 수 있었습니다.