디자인 시스템을 구현하면서 :hover 가상 클래스를 적용했던 경험을 기록한다.

:hover는 포인터가 해당 엘리먼트 위에 올라가 있는 상태를 나타내는 가상 클래스로 주로 버튼이나 인풋과 같은 컴포넌트를 구현할 때 사용한다.

이러한 :hover 가상 클래스는 마우스를 올려둔다와 같은 경우가 없는 환경에서는 어떻게 동작할까? 대표적으로 터치로 동작하는 모바일 디바이스가 있을 텐데, 어떻게 동작하는지 알아보자.

터치 디바이스에서의 :hover

:hover 페이지의 예제를 브라우저에서 실행시켜보면 쉽게 알 수 있다.

a:hover {
  background-color: gold;
}

PC 브라우저에서는 잘 동작하지만, 모바일 브라우저에서는 마우스 포인터가 없으니 :hover 클래스가 동작하지 않을 것처럼 보이지만, 클릭 이벤트가 발생할 경우 :hover에 선언한 배경 색상이 변경된 채로 남아있는다. 그리고 다른 영역을 클릭하면 효과가 해제된다는 것을 알 수 있다.

그렇다면 마우스 환경과 동일하게 touchOver 시에만 스타일이 적용되게 하려면 어떻게 해야할까?

터치 디바이스에서 동일하게 스타일 적용하기

@media hover

@media hover를 이용하면, hover를 지원하는 환경인 경우에만 해당 스타일이 적용되도록 할 수 있다.

예시는 아래와 같다.

a:hover { /* default hover effect */
  color: black;
  background: yellow;
}

@media (hover: hover) { /* when supported */
  a:hover {
    color: white;
    background: black;
  }
}

하지만 이방법을 사용하더라도 일부 Android 에서는 길게 누를 때 호버링을 에뮬레이트하는 기능이 있어 hover를 지원하는 것으로 판단하는 경우가 있다.

이러한 경우에도 동일한 경험을 제공하기 위해서는 @media pointer를 사용하면된다.

@media pointer

@media pointer는 장치에 포인터의 존재 여부와 포인팅 장치의 정확도를 확인한다.

mdn에서는 아래와 같이 설명하고 있다. 우리의 경우에는 fine 을 사용하면 된다.

none

The primary input mechanism does not include a pointing device.

coarse

The primary input mechanism includes a pointing device of limited accuracy, such as a finger on a touchscreen.

fine

The primary input mechanism includes an accurate pointing device, such as a mouse.

결과적으로 아래와 같이 적용하면 된다.

@media (hover: hover) and (pointer: fine) { /* when supported */
  a:hover {
    color: white;
    background: black;
  }
}

호버를 지원하고, 포인터를 지원하는 디바이스인 경우에만 호버 스타일을 적용할 수 있게 되었다.

결론

결론적으로 위 방법을 사용하면 포인터를 사용하는 디바이스에서만 호버스타일을 적용할 수 있게되었지만, 위 방법이 무조건적으로 적합한 방식인지는 생각해볼 필요가 있다.

결국 터치디바이스에서 hover스타일을 적용시키고 있는 것이 지금의 웹 표준 동작에 가깝다고 할 수 있는 것이기 때문이다.