[CSS] pointer-events

pointer-events는 CSS 속성 중 하나로, 마우스 클릭이나 터치 같은 "포인터 이벤트"를 해당 요소에 전달할지 여부를 결정합니다.

---

🔍 쉽게 말해:

pointer-events: none;을 주면,
해당 요소는 클릭되지 않으며, hover, active 등도 무시됩니다.

🧪 예시

<button style="pointer-events: none;">클릭 안 됨</button>
<button style="pointer-events: auto;">클릭 됨</button>

 

• none → 클릭해도 아무 일도 안 생김
• auto → 기본 동작 (클릭 가능)

 

<div style="pointer-events: none;">
  <button>이 버튼도 클릭 안됨</button>
</div>

 

• 부모인 <div>에 pointer-events: none을 줘도, 자식인 버튼도 클릭 안 됩니다.

 

값	설명
auto	기본값, 포인터 이벤트 정상 처리
none	포인터 이벤트 무시 (클릭, hover 모두 무시)
inherit	부모 요소의 값을 상속