[Tailwind] 부모 요소가 hover 상태일 때 자식 요소 스타일 지정하기 (group)

지난번 팀프로젝트에서 특정 경로로 이동하는 버튼들을 모두 useNavigate()를 이용해 만들었는데, 시맨틱한 코드를 고려하기 위해서는 Link 태그를 더 활용해보는 것을 추천받았다.

경로 이동을 유도하는 버튼들은 Link로 처리했는데 hover 이벤트를 주려니 문제가 생겼다!

 

문제상황

이렇게 Link 태그의 영역이 아니면서, 부모요소인 div 태그의 영역에 hover되면 동시에 hover 스타일 속성이 적용되지 않는 현상이 있었다. Link 태그의 width, height를 full(100%)로 설정해줘도 되지만, 경우에따라 이와 같은 구조이지만 크기는 부모와 달라야하는 상황이 있을 것 같아 좀 더 알아보았다.

 

해결

tailwind에서 hover, focus 등의 상태를 그룹지어주기위해 group을 사용할 수 있다

/* 연관성 적은 코드 생략 */
<div className='bg-point-red group hover:bg-white cursor-pointer'>
  <Link
    to='/test'
    className='text-white group-hover:text-point-red'
  >
    MBTI 검사하러 가기!
  </Link>
</div>

부모 요소에 group 클래스를 지정해주고, 자식 요소에 group 지어서 발생하는 효과에 지정할 클래스를 작성해주면 된다!

지금 상황을 예시로 설명해보면 부모 요소와 hover 상태를 그룹짓고 싶으므로 group-hover: 를 prefix로 두고, hover 상태에 지정하고 싶은 스타일인 text-point-red를 작성해주는 것이다!

 

원하던 방식대로 보이는 것을 확인할 수 있다!