모바일 hover 색상이 눌린 채 남을 때, @media (hover)로 해결하기
스마트폰에서 버튼이나 카드를 누르고 나면 마우스를 올렸을 때의 hover 색상이 그대로 남아 있는 현상은, hover 스타일을 @media (hover: hover) 안으로 옮기면 깔끔하게 해결됩니다.
PC에서는 기존 효과를 그대로 살리고, 터치 화면에서는 눌린 듯한 상태가 남지 않게 나누는 방법입니다.
💡 왜 손가락으로 눌렀는데 hover가 켜질까요?
터치 기기에는 마우스 커서가 없어서, 브라우저가 기존 사이트와의 호환을 위해 탭한 요소를 hover 상태로 간주합니다. 문제는 이 상태가 다른 곳을 탭하기 전까지 풀리지 않는다는 점입니다. 그래서 메뉴를 누르고 뒤로 돌아오면 그 항목만 색이 바뀐 채로 보이거나, 토글 버튼이 켜진 건지 꺼진 건지 헷갈리는 일이 생깁니다.
1. hover 스타일을 미디어 쿼리 안으로 옮기기
hover: hover는 "주 입력 장치가 마우스처럼 올려 놓을 수 있는가"를 묻는 조건입니다. 여기에 pointer: fine을 함께 걸면 정밀한 포인터가 있는 환경, 즉 일반적인 PC에서만 hover 효과가 적용됩니다. 크롬, 사파리, 파이어폭스, 삼성 인터넷 등 현재 쓰이는 브라우저는 모두 지원합니다.
/* 기존: 모든 기기에 적용 */
.btn:hover { background: #cc2b2b; }
/* 변경: 마우스 환경에서만 */
@media (hover: hover) and (pointer: fine) {
.btn:hover { background: #cc2b2b; }
}2. 터치 화면에는 :active로 눌림 반응 주기
hover를 빼면 모바일에서는 눌렀는지 알 수 있는 반응이 사라집니다. 이때는 손가락이 닿아 있는 동안에만 적용되는 :active를 쓰면 됩니다. 손을 떼면 바로 원래대로 돌아오기 때문에 색이 남지 않습니다. 키보드 사용자를 위해 :focus-visible 스타일도 따로 두는 것이 좋습니다.
.btn:active {
transform: scale(0.98);
opacity: 0.85;
}
.btn:focus-visible {
outline: 2px solid #cc2b2b;
outline-offset: 2px;
}3. 적용 전에 확인할 점
실제 리뉴얼 작업에서 이 방식으로 바꿀 때 놓치기 쉬운 부분은 아래와 같습니다.
| 확인 항목 | 이유 |
|---|---|
| hover로만 열리는 메뉴 | 모바일에서 아예 안 열릴 수 있음 |
| 터치 노트북, 태블릿 | 주 입력 장치 기준으로 판단됨 |
| CSS 파일 여러 곳의 :hover | 하나라도 남으면 증상 반복 |
드롭다운처럼 hover로만 열리던 기능은 클릭으로도 열리게 바꿔 둬야 합니다. 마우스와 터치를 함께 쓰는 기기까지 고려해야 한다면, "어느 입력 장치든 hover가 가능한가"를 보는 any-hover를 쓰는 방법도 있습니다. 변경 후에는 PC 브라우저의 모바일 모드만 믿지 말고 실제 아이폰과 안드로이드 폰에서 한 번씩 눌러 보는 것이 확실합니다.
"효과는 기기에 맞게 나눠야 제대로 보입니다."
나눔웹은 PC에서 보기 좋은 효과가 모바일에서는 오히려 불편을 주지 않는지,
실제 기기로 눌러 보며 확인하고 마무리합니다.
