마우스 올리면 나타나는 효과에 CSS 에서 :hover 를 자주 사용하게 된다.
jQuery 에서 주는거보다 글쓸일도 적고 스크립트 보다는 아무래도 CSS 를 먼저 만지는게 순서니까.
근데 CSS 에서 hover 를 사용할때 모바일환경에서 문제가 있다.
가령.
<div class=”m1″>
<a href=”ㅋㅋㅋ”>
사진
</a></div>
이런상태에서(사진은 display:none; 상태임)
m1 을 hover 하게 되면 사진이 보이고 그걸 클릭했을때 링크로 가게 하고 싶은데.
CSS 를 사용해서 hover 하게 되면 display:block; 이 이 되면서 바로 링크가 클릭되어 버린다.
그래서. 모바일에서도 PC 와 같은 효과를 보여줄라면 jQuery 로 줘야함.
물론 모바일에서 hover는 잘 쓰여지지 않는다.
결과적으론 클릭을 두번하게 만드는 셈이기 때문이다.