hover 이벤트 모바일 반응형 이슈.md

hover 이벤트 모바일 반응형 이슈

hover 이벤트 모바일 반응형 이슈

PC 화면에서는 마우스를 통해 호버 이벤트를 CSS로 걸수 있다.

하지만 태블릿, 모바일 일 경우에서는 클릭 한번했을때 hover 이벤트가 같이 걸리게된다.

반응형을 구현할때 문제가 발생한다.

따라서 PC에서만 호버이벤트를 걸고, 태블릿, 모바일 일경우에서는 호버이벤트가 걸리지 않게해야한다.

@media (hover: hover) {
  &:hover {
    transform: translateY(-13px);

    & > div {
      background-color: #2a2a2a;
    }

    & > h5 {
      color: #ffffff;
    }
  }
}

위와 같이 미디어 쿼리를 사용해서 마우스 같은 포인터 장치에만 호버이벤트가 걸리게 할 수 있다.