[CSS] 요소를 fadeout한 뒤에도 여전히 clickable할 때 해결 방법

---

문제 상황

버튼을 클릭하면 바로 위의 문단이 fade out 되면서 사라져야 하는데, 해당 부분을 드래그하면 draggable 하고, 복사까지 된다.

코드

.fade {
    animation: fade ease 1s forwards;
}

@keyframes fade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

해결 방법

위 코드를 아래처럼 바꾼다.

@keyframes fade {
    from {
        opacity: 1;
        pointer-events: all;
    }
    to {
        opacity: 0;
        pointer-events: none;
    }
}

더 이상 Clickable 하지 않다. pointer-events CSS 속성은 그래픽 요소가 어떤 상황에서 포인터 이벤트의 대상이 될 수 있는지 지정해주는 속성이다. (MDN)