모바일 웹에서 hover 효과 제거하기

모바일(터치 디바이스)에서는 마우스 커서가 없기 때문에 hover 효과를 줄 수 없다.
PC에서처럼 css에 hover 효과를 넣게 되면 해당 요소를 두번 터치해야 원하는 동작을 얻을 수 있다. (한번 터치하면 hover 효과만 적용되고 동작하지 않음)

특히 반응형 작업을 할 때 이 부분이 불편할 수 있는데 아래와 같은 방법으로 해결할 수 있다.

a { color: black; text-decoration: none; }

위와 같이 hover를 적용할 요소에 hover 효과를 제외한 스타일을 작성하고

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

이렇게 미디어쿼리에 hover효과 스타일만 따로 작성해주면 PC에서는 hover 효과가 적용되고 모바일에서는 적용되지 않는다.

👇example