모바일 페이지에서 클릭 후 hover가 유지되는 경우

데스크탑 페이지에서는 아무런 문제가 없었는데 모바일 페이지에서는 키워드를 추가/제거하는 과정에서 이상한 점이 발견됐다.

 

 hover는 마우스가 개채 위에 올라갔을 때 적용되는 클래스이다. 데스크톱 사이트에서는 마우스 포인터를 따라 hover를 판단할 수있다.

모바일에서는 터치가 포인터 역할을 한다. 그런데 터치는 마우스가 클릭한 것 처럼 터치 이벤트는 전달되는데, 다른 터치 이벤트가 발생하지 않으면 그 위치에 있는 것으로 간주한다. 그래서 터치 후에 잘못된 hover 요소가 생기는 것이다.

 

모바일에서 잘못된 hover를 제거하기 위해서 미디어쿼리를 사용했다.

 

@media (min-width: 860px) {
    .keywordDeleteBtn:hover {
        background-color: rgb(97, 119, 177);
        color: white;
    }
 
    .isChecked .keywordDeleteBtn:hover {
        background-color: rgb(97, 119, 177);
    }
}

 

화면의 폭이 클 때만 hover를 적용하도록 설정하니 모바일에서 원하는대로 hover가 발생하지 않았다.

 

 

참고한 사이트

https://7942yongdae.tistory.com/112

CSS - 모바일에서만 hover 스타일을 제거해보자