모바일에서 호버 동작을 막는 방법
최근에 작업을 하다가 마우스 호버 시에만 효과를 주고 싶었는데, 모바일 기기에서 클릭하면 호버 상태가 지속되는 걸 확인했다. 모바일에는 마우스라는 개념이 따로 없이 터치로 동작하기 때문에 발생한 이슈였다. 이를 해결하기 위해 적용한 방법은 다음과 같다.
@media (hover: hover) and (pointer: fine) {
// 여기에 호버 효과 작성
}hover: hover은 주 입력 장치가 호버가 가능한 장치일 경우를 거르는 값이고, pointer: fine은 마우스 같은, 주 입력 장치가 정확한 포인팅 기기를 포함하고 있을 때를 식별한다.