[CSS] Hover 하는 형제들(siblings) 스타일 적용

마우스 오버 하는 대상 형제들한테 스타일주기

일반적으로 형제 엘리먼트에 스타일을 주려면 Javascript가 필요합니다.

하지만, Javascript없이 CSS를 사용하는 방법이 있습니다.

 

부모 엘리먼트의 :hover를 기준으로 아래 마우스 오버하는 자식을 제외한 형제 엘리먼트들에 스타일을 주는 방식입니다.

 

마우스 오버하고 있는 대상을 강조하고 싶을 때 사용합니다.

.parent:hover .child:not(:hover) {
  /* this style affects all the children except the one you're hovering over */
}

 

+ 예제 코드