모바일 환경에서 hover가 지속되는 현상 고치기

PC 브라우저로 테스트 할 때는 몰랐는데

스마트폰을 이용해 모바일 테스트를 해보니까

 

:hover에 background를 넣어놨는데 

이 hover의 background 색상이 지속되는 현상이 있었다.

 

 

이미지 처럼 같은 위치에 있을 때

각 페이지로 화면 전환이 이뤄지면 처음에는 기본 색상이였는데

두번째 화면 부터는 hover 색상으로 적용되어 유지되었다.

 

왜그럴까?

모바일 기기는 마우스 대신 터치로 작용을 하는데 그래서 hover 기능이 크게 의미가 없다.

hover 기능이 사용자의 커서(마우스 포인터)가 요소 위에 올라가 있으면 선택되어 효과를 주는건데, 모바일에서는 손가락이 요소 위에 올라가 있는게 아니기 때문이다.

그래서 모바일 환경에서는 엘리먼트를 터치하게 되면 브라우저는 포인터가 계속 해당 엘리먼트에 위에 머물고 있다고 인식한게 된다.

따라서 다른 곳을 터치해 상호작용을 다시 발생시키지 않는 이상 :hover에 효과가 사라지지 않는 것이였다.

특히나 bottom button이라서 버튼의 위치가 똑같았기 때문에 해당 터치 구역에 머물고 있다고 인식해서 hover css가 작동하고 있었던 것이다.

 

 

해결방법

 

미디어 쿼리를 이용해 PC와 Mobile을 구분해줘야한다.

@media hover 와 @media pointer 를 이용해 해결할 수 있었다.

 

@media hover

@media (hover: hover) {
  /* hover가 지원하는 환경일 때 동작 */
  a:hover {
    color: white;
    background: black;
  }
}

 

@media pointer

@media (pointer: fine) {
  /* 터치 스크린에 사용되는 손가락 처럼 부정확한 포인터 장치 지원 */
  input[type="checkbox"] {
    width: 15px;
    height: 15px;
    border-width: 1px;
    border-color: blue;
  }
}

@media (pointer: coarse) {
  /* 마우스처럼 정확한 포인터 장치 지원 */
  input[type="checkbox"] {
    width: 30px;
    height: 30px;
    border-width: 2px;
    border-color: red;
  }
}

 

난 위에 2개를 조합해서 해결했다

@media (hover: hover) and (pointer: fine) { 
  /* hover를 지원하고, 마우스처럼 정확한 포인터 장치 일 때 hover 효과 사용 */
  a:hover {
  	color: white;
    background: purple;
  }
}

 

🍎 참고

- https://css-irl.info/detecting-hover-capable-devices/

- https://stackoverflow.com/questions/40532204/media-query-for-devices-supporting-hover

- https://paperblock.tistory.com/164

- 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/