모바일에서 버튼 hover 효과 제거

<button>버튼에 사용할 때 사용하는 css point-events: none; 속성을 소개하려고 합니다. 특히 반응형을 만들다 보면 사용할 일이 생긴다. :hover 가 모바일에서 :focus 효과가 나온다. 그리고 모바일에서 hover 효가 없이 클릭하면 바로 넘어 기기 때문에 :hover가 필요가 없다. 그래서 반응형을 개발할 때 버튼의 마우스/터치 이벤트들(css hover/active, js click/tap, 커서 드래그 등 ) 효과가 있다면 @media에서부터 point-events: none; 속성을 사용하기를 권장한다. point-events 속성에는 3개의 속성값을 가지고 있다. * point-events: none; html 요소에 정의된 클릭, 상태(hover, active 등), 커서 옵션들이 비활성화한다. * point-events: auto; 비화 성화된 이벤트를 다시 기본 기능을 하도록 되돌린다. * point-events: inherit; 부모 요소...

원문링크 : 모바일에서 버튼 hover 효과 제거