-
[CSS] Hover 하는 형제들(siblings) 스타일 적용Coding 2023. 5. 12. 17:36반응형
마우스 오버 하는 대상 형제들한테 스타일주기
일반적으로 형제 엘리먼트에 스타일을 주려면 Javascript가 필요합니다.
하지만, Javascript없이 CSS를 사용하는 방법이 있습니다.
부모 엘리먼트의 :hover를 기준으로 아래 마우스 오버하는 자식을 제외한 형제 엘리먼트들에 스타일을 주는 방식입니다.
마우스 오버하고 있는 대상을 강조하고 싶을 때 사용합니다.
.parent:hover .child:not(:hover) { /* this style affects all the children except the one you're hovering over */ }
+ 예제 코드
반응형'Coding' 카테고리의 다른 글
[CSS] 이미지를 컨테이너에 맞게 사이즈 통일하는 방법 (object-fit, background ..) (0) 2023.07.12 [CSS, JS] 꽃이 흔들거리는 효과 구현하기 (0) 2023.05.19 [Javascript] 카운트다운 만들기 (0) 2023.02.15 [CSS] 동영상 반응형 사이트에 추가하기 (0) 2022.11.10 [JS] Swiper.js 이미지 슬라이드 스크립트 사용법 (+반응형) (0) 2022.11.04