터치 디바이스(핸드폰/패드) 마우스 hover 해결방법

pc에서 마우스 hover 가상 클래스를 이용해서 이펙트를 주는 경우가 정말 많다.

근데 핸드폰이나 패드 같은 "터치" 디바이스에서 제대로 작동하지 않는다는 문제가 존재한다.

이를 해결하기 위해서 해결방법을 작성해 본다.

https://ykwan0714.github.io/%ED%84%B0%EC%B9%98-%EB%94%94%EB%B0%94%EC%9D%B4%EC%8A%A4-%EB%AA%A8%EB%B0%94%EC%9D%BC%EC%97%90%EC%84%9C-hover-%EC%A0%9C%EA%B1%B0%ED%95%98%EA%B8%B0/

터치 디바이스, 모바일에서 hover 제거하기 | 잡다한 개발 이야기

(관련글)

핵심

핵심은 다음과 같다.

• 미디어 쿼리를 적용
• 포인터 적용 (포인터의 유무) - 여기에서 포인터는 c의 포인터와 다른 개념임.
• 자바스크립트를 이용하여 디바이스의 유형 파악

이 정도라고 볼 수 있다.

디테일한 부분은 위 글을 참고하자.

---

(코드는 밑의 예제 참고)

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