pointer-events

Controls whether an element responds to mouse/touch events. Applying pen makes the element "transparent" to mouse events, allowing clicks to pass through to elements below.

Class List

Class	CSS	Description
`pen`	pointer-events: none	Block mouse/touch events. Clicks pass through to elements below
`pea`	pointer-events: auto	Enable mouse/touch events. Override parent pen on child

Visual Comparison

Try clicking each button. The button with pen applied does not respond to clicks.

pointer-events: auto — pea

Mouse events work normally

pointer-events: none — pen

Mouse events are blocked. Cursor does not change either

Click-through

The key feature of pen is that clicks pass through to the element below. Used for overlays, decorative elements, and watermarks.

<!-- Click-through overlay -->
<div class="pr">
  <button class="cp py12px px2rem bg6366F1 cFFFFFF br8px bn">
    Button underneath
  </button>
  <!-- Overlay: clicks pass through to button below with pen -->
  <div class="pa t0 l0 w100p h100p pen bg0-0-0-30">
    <span class="cFFFFFF o50">OVERLAY</span>
  </div>
</div>

<!-- Gradient cover -->
<div class="pr">
  <div class="p2rem">Scrollable content</div>
  <div class="pa b0 l0 w100p h5rem pen"></div>
</div>

Click-through demo

OVERLAY

The semi-transparent overlay has pen applied, so you can click the button below

Class Details

`pen`pointer-events: none

Makes an element "transparent" to mouse/touch events. Click, hover, and cursor changes are all ignored, and events pass through to elements below. Used for disabled states, loading states, and overlays that need click-through.

<!-- Disabled button -->
<button class="pen o50 py12px px2rem bg6366F1 cFFFFFF br8px bn">
  Not clickable
</button>

<!-- Disable form while loading -->
<form class="pen o50 df fdc gap12px">
  <input type="text" placeholder="Name" />
  <input type="email" placeholder="Email" />
  <button>Submitting...</button>
</form>

<!-- Conditional disable (Vue) -->
<button :class="isLoading ? 'pen o50' : 'cp'" class="py12px px2rem bg6366F1 cFFFFFF br8px bn">
  {{ isLoading ? 'Processing...' : 'Submit' }}
</button>

Common Combinations

`pen o50`	Block events + semi-transparent (disabled state)
`pen usn`	Block events + block selection (fully disabled)
`pen pa t0 l0 w100p h100p`	Click-through overlay

Caution

pen disables events, not visuals. Styles remain unchanged, so provide visual feedback with o50 etc. to indicate the disabled state.

`pea`pointer-events: auto

Re-enables mouse/touch events. Used to allow specific child elements to receive events when the parent has pen set.

<!-- Block events on parent, activate specific child only -->
<div class="pen o50 p2rem bg18181B br8px">
  <p class="cFAFAFA mb12px">This area is not clickable</p>
  <button class="pea o100 cp py8px px16px bg6366F1 cFFFFFF br4px bn">
    Only this button is clickable
  </button>
</div>

pen vs disabled Comparison

Both pen and the HTML disabled attribute block clicks, but they behave differently.

	pen	disabled
Applies to	모든 HTML 요소	폼 요소 (button, input 등)
Mouse events	차단 (클릭 통과)	차단
Keyboard access	가능 (Tab 포커스)	차단 (Tab 건너뜀)
Form submission	값이 전송됨	값이 전송되지 않음
:hover styles	적용 안 됨	적용 안 됨
accessibility	스크린리더에서 읽힘	스크린리더에서 비활성 상태로 읽힘

Tips & Notes

Overlay click-through

Apply pen to decorative overlays, watermarks, gradient covers, etc. to allow clicks on elements below to work normally.

Use for loading/disabled states

Combine pen o50 during form submission or data loading to create a visually and functionally disabled state.

Does not block keyboard access

pen only blocks mouse/touch. Keyboard Tab focus is still possible, so use the HTML disabled attribute for complete deactivation.

user-select cursor opacity