웹코딩/css3

CSS : pointer-events

quantumcode 2022. 2. 3. 03:34
728x90

pointer-events :

해당 속성은 그래픽 요소가 어떤 상황에서 포인터 이벤트의 대상이 될 수 있는 지정합니다.

키워드 값 중 auto, none을 제외한다면 대부분 SVG에 적용되는 속성입니다.

/* 키워드 값 */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill;    /* SVG only */
pointer-events: visibleStroke;  /* SVG only */
pointer-events: visible;        /* SVG only */
pointer-events: painted;        /* SVG only */
pointer-events: fill;           /* SVG only */
pointer-events: stroke;         /* SVG only */
pointer-events: all;            /* SVG only */

/* 전역 값 */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

값(value)

auto :

요소가 pointer-events 속성을 지정하지 않은 것처럼 행동합니다. SVG 콘텐츠에서는 auto visiblePainted가 동일한 효과를 지닙니다.

 

none:

요소가 포인터 이벤트의 대상이 되지 않습니다. 그러나 해당 요소의 자손이 다른 pointer-events 값을 지정한 경우, 그 자손은 대상이 될 수 있습니다.

'웹코딩 > css3' 카테고리의 다른 글

css transition / animation  (0) 2022.02.08
css flex-box 사용방법  (0) 2022.02.08
벤더프리픽스( vendor prefix)  (0) 2022.01.26
다중클래스 사용 및 선택자 선택방법  (1) 2022.01.25
mediaquery 규칙  (0) 2022.01.25