반응형_모바일에서 hover 이슈

반응형 사이트 제작시 PC에서 마우스 hover 효과를 주었는데, 모바일에서 터치(클릭)를 했는데 해당 요소를 누르고 있는 것처럼 hover 스타일이 적용되어 버벅거리는 현상이 발생이 되었다.
터치 시에 동작하는 이벤트 순서를 알아보자

touchstart - touchend - mouseover - mousemove - mousedown - mouseup - click

마우스가 존재하지는 않지만, 내부적으로는 터치 이벤트 뿐만 아니라 마우스 이벤트도 함께 발생한다고 한다. 그래서 이러한 현상이 발생되는데 이럴때는 hover 스타일을 모바일에서만 적용되게 하는 방법으로 CSS Media Queries Level 4에 포함된 Interaction Media 기능 중 hover를 사용 해보자

@media (hover: hover) {}

적용 코드

@media (hover: hover) {
    .like-icon:hover {
      background: url('../public/images/i_like_on.png');
      background-size: cover;
    }
  }