[실전 프로젝트] :hover 이벤트 발생 시 형제 요소 선택해서 스타일 변경하기

playList 아이콘에 마우스를 올렸을 때 tolltip처럼 옆에 설명 같은 이미지가 나오도록 구현 하기 위해서 :hover를 사용 하였고, playList icon과 playListText icon이 sibling(형제) 관계이기 때문에 형제 선택자를 사용하여 구현하였다.

(구글에는 "hover 시 다른 태그 css 적용"이라고 검색했다.)

 

구현 코드

const HoverImage = styled.img`
  width: 24px;
  height: 24px;
  src: ${(props) => props.src};
  position: ${(props) => props.position};
  right: ${(props) => props.right};
  cursor: pointer;

  &:hover ~ .playListHover {
    position: relative;
    width: 72px;
    right: 30px;
    height: 21.6px;
    background-image: url(${(props) => props.hoverImage});
    background-repeat: no-repeat;
    background-size: cover;
  }
`;

 

실행 영상

실행 영상

 

참고한 사이트

https://andwinter.tistory.com/347

[styled component] 가상선택자와 참조

https://developing-move.tistory.com/75

[CSS] 복합 선택자(Combinators)

https://haenny.tistory.com/173

[CSS] 형제 선택자, 속성 선택자, 가상클래스와 가상요소 알아보기