[CSS] CSS 이벤트 제어 : pointer-events

pointer-events : HTML 요소들의 마우스/터치 이벤트들(CSS hover/active, JS click/tap, 커서 드래그등)의 응답을 조정할 수 있는 속성이다.

.hidden {opacity: 0;pointer-events:none;}

pointer-events 속성은 11개의 속성값을 가지지만 3개를 제외하고는 모두 SVG에서 사용하도록 예약되어 있다. 아래의 3개의 속성값은 HTML 요소들에서 사용 가능하다.

none : HTML 요소에 정의된 클릭, 상태(hover,active등), 커서 옵션들이 비활성화한다.

auto : 비활성화된 이벤트를 다시 기본 기능을 하도록 되돌린다.

inherit : 부모 요소로부터 pointer-events 값을 상속

※ IE9와 IE10에서 pointer-events가 작동하지 않기때문에 visibility: hidden 값과 함께 사용하는 것을 고려하도록 하자.

출처: http://webdir.tistory.com/506 [WEBDIR]