모바일에서 CSS hover 적용할 때 효과가 지속되는 문제 해결!

 

모바일에서 호버 이슈 발생

 

문제: 모바일에서 버튼을 클릭하면 호버가 계속 적용되어, 다른 버튼까지도 눌림 효과가 유지된다.

 

해결 방법

1. 각각의 사용 환경을 고려하여 css 코드 작성

2. 터치 관련 이벤트 발생시, css 효과가 없어지도록 js 코드 작성

 

 

 

1. CSS로 PC와 Mobile을 구분하는 코드

 

/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {
    ...
}
/* stylus-based screens */
@media (hover: none) and (pointer: fine) {
    ...
}
/* Nintendo Wii controller, Microsoft Kinect */
@media (hover: hover) and (pointer: coarse) {
    ...
}
/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) {
    ...
}

 

/* 스마트폰, 태블릿 등 터치스크린 기기에서 active 상태를 처리
   터치스크린은 빠른 반응이 필요하므로 애니메이션 시간을 짧게(200ms) 설정 */
@media (hover: none) and (pointer: coarse) {
  .btn-fade:active {
    background: #ff7d4d; /* 버튼 클릭 시 배경색을 오렌지로 변경 */
    transition: 200ms ease-in; /* 200ms 동안 부드럽게 색상이 변화 */
  }
}

/* 데스크탑이나 터치패드에서 hover 상태를 처리
   마우스 사용자는 더 여유로운 상호작용을 기대하므로 애니메이션 시간을 조금 더 길게(300ms) 설정 */
@media (hover: hover) and (pointer: fine) {
  .btn-fade:hover {
    background: #ff7d4d; /* 마우스 오버 시 배경색을 오렌지로 변경 */
    transition: 300ms ease-in; /* 300ms 동안 부드럽게 색상이 변화 */
  }
}

 

• hover: 마우스 오버 =  모바일에서는 터치 후에 다른영역 터치 시 까지 유지된다.
• active: 마우스 클릭 = 누르고있는 동안에만 유지 = 모바일에서는 터치하고 있는 동안에만 유지된다.

 

2. JS에서 이벤트 받을 때 사용하는 코드

 

function startup() {
  var el = document.getElementById("canvas");
  el.addEventListener("touchstart", handleStart, false);
  el.addEventListener("touchend", handleEnd, false);
  el.addEventListener("touchcancel", handleCancel, false);
  el.addEventListener("touchmove", handleMove, false);
}

// handler에는 css 속성을 제거하는 dom 코드를 작성

 

 

 

퍼블리싱 경험을 통해 느낀점

 

1. 분야가 새롭다: 상대적으로 논리를 덜 사용할 뿐이지, 결코 "쉬운"분야는 아니다.
2. 개발 환경은 다차원이다: 모바일, PC, 브라우저 각각의 환경을 구분하여 개발해야한다.