모바일웹 :active 이슈

모바일웹 :active 이슈

모바일 웹 프로젝트 진행 중 디자이너로 부터 마우스오버 효과를 넣어달라는 요청을 받았다.

응?? 마우스오버?

모바일도 마우스로 작동하는건가?? 라는 생각을 하려고 하는데 디자이너가 말했다.

손으로 버튼을 누르는 순간 버튼에 마우스오버 효과처럼 버튼의 배경색상과 글씨 색을 바꿔달라고.

역시 그럼 그렇지. -_-;;

이런 작업은 처음이었지만 별로 대수롭지 않게 생각하고 해당 A태그에 아래와 같이 스타일을 주었다.

a.btn_check {background:#fff; color:#181818}

a.btn_check:active {background:#181818; color:#fff;}

A태그에 :active를 붙여 스타일을 작성하면 당연히 효과가 나타날줄 알았는데 미동도 없었다.

이런......하지만 당황하지 않고 :hover에 스타일을 작성해보았다.

a.btn_check {background:#fff; color:#181818}

a.btn_check:hover {background:#181818; color:#fff;}

이번엔 어떤 반응이 왔는데, 마우스로 해당 버튼을 클릭하면 :hover에 준 스타일이 적용되었지만 

그 스타일을 해제하려면 다른 버튼을 클릭하거나 어떤 다른 액션을 취해야 했다. 

디자이너도, 나도 원한건 이게 아니었다. 

역시 쉬운게 없구나.. 

본격적으로 나의 사수인 구글링을 하려는데 의외로 해답은 간단했다.

바로 스크립트 한줄이면 됐다.

$(document).on("touchstart", function(){ });

위와 같이 공통적으로 사용되는 js파일 상단에 넣어주면 a:active 스타일이 깔끔하게 원하는데로 적용되었다.

확실히 어떤 원인에서인진 모르겠지만, 원인은 추후에 다시 올리는 걸로 ~