[CSS] pointer-event 알아보기 ing

작업 하다가 a링크에 걸린 이벤트를 강제로 없애야 했는데 이때 유용하게 처리.

어떻게 활용할 수 있는지 알아보기 위해 정리해본다.

pointer-event란?

pointer-events : none; 으로 처리하게 되면 포인터 이벤트(클릭, 드래그, 호버)를 비활성화 시킬 수 있다.

<div class="hidden"></div>

.hidden {
    /* 키워드 값 */
    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;
}

8개 값은 svg에서만 사용할 수 있다.

 

---

참고자료

MDN::pointer-events

위키백과 백터그래픽스 보러가기