CSS - 모바일에서만 hover 스타일을 제거해보자

반응형으로 웹 화면을 개발하다 보면 모바일에서만 hover 스타일이 적용되지 않게 해야 하는 경우가 발생합니다. 모바일 기기에서 특정 <button>이나 <a>를 터치(클릭)를 했는데 해당 요소를 누르고 있는 것처럼 hover 스타일이 적용되어 있기 때문입니다.

hover 스타일이 적용되는 이유

:hover 스타일이 해제되지 않고 지속적으로 적용되는 이슈는 모바일 화면이 아닌 모바일 기기 화면에서 발생하는 문제입니다. 모바일 기기에서만 이런 현상이 일어나는 이유는 모바일 기기가 상호작용 하는 방식 때문입니다.

 

 마우스 커서와 같은 포인터가 DOM의 element 요소 위에 위치하면 적용되는 스타일이 바로 의사(Pseudo) 클래스인 :hover인데, 모바일 기기는 터치(Touch)가 포인터의 역할을 합니다.

 

 즉 모바일 기기 화면에서 터치(Touch)를 이용해 요소를 선택하면 마우스처럼 누른다는 개념이 적용되어 요소 위(:hover)라는 의사는 전달이 되어도, 다른 곳을 터치해 상호 작용을 발생시키지 않는 이상 요소 위(:hover)를 떠났다는 개념이 적용되지 않기 때문에 :hover 스타일을 적용한 경우 모바일 기기에서는 예상하지 못한 화면을 볼 수 있습니다.

 

 

hover 스타일을 모바일에서만 적용되게 하는 방법

그렇다면 모바일 기기에서만 :hover 스타일이 적용되지 않게 하는 방법은 무엇일까요? 해결 방법은 CSS Media Queries Level 4에 포함된 Interaction Media 기능 중 hover를 사용하는 것입니다.

@media (hover: hover) {}

 위에서 제시한 @media 쿼리를 사용하면, 모바일 기기에서는 :hover 스타일이 적용되지 않게 화면을 만들 수 있습니다. <a> 태그를 이용해 조금 더 구체적인 예를 든다면 아래와 같이 코드를 작성해볼 수 있습니다.

@media (hover: hover) {
  a:hover {
    color: yellow;
    text-decoration: underline;
  }
}

 모바일 기기가 아닌 <a> 태그에 :hover 스타일을 적용하고 싶다면 위와 같이 @media 쿼리를 이용해 CSS를 작성하면 됩니다.

끝맺음

모바일 기기 화면에서 :hover 스타일이 적용되지 않게 하는 방법은 예제를 통해 제시한 것처럼 Interaction Media의 hover를 사용해 PC와 같은 포인터를 사용하는 환경에서만 :hover 스타일이 적용되게 하는 것입니다.

 

 이 글에서는 모바일 기기를 빗대어 Interaction Media의 hover를 이야기했지만, hover는 마우스와 같은 포인터 장치를 통해 상호 작용하는 경우를 정의하기 위한 기능입니다. 그러니 단순히 모바일 기기를 구분하는 방법이라고 생각하시면 안 됩니다.