Pointer Events

Pointer event utilities control whether an element can receive mouse, touch, and pointer interactions.

Use pointer-none to make an element fully transparent to input — clicks and taps pass through to elements beneath it. Use pointer-auto to restore the browser default, including inside a parent that has pointer events disabled.

All pointer event utilities are pure CSS and do not require the FrontAlign runtime.

Quick reference

Usage

Disable interaction

Apply pointer-none to prevent an element from receiving any pointer events. Useful for disabled states, decorative layers, and loading overlays.

<div class="pointer-none opacity-50">
  Disabled Content
</div>

Pass-through overlay

Apply pointer-none to a decorative overlay so it remains visible but does not block clicks behind it.

<div class="pointer-none">
  Decorative Overlay
</div>

Restore interaction inside a disabled parent

Apply pointer-auto to a child element to make it interactive again when its parent has pointer-none.

<div class="pointer-none">
  <button class="pointer-auto cursor-pointer">
    Still Clickable
  </button>
</div>

Real-world examples

Disabled product card

<div class="pointer-none opacity-50 cursor-not-allowed border rounded-4">
  Coming Soon
</div>

Decorative layer

<div class="pointer-none opacity-25">
  Background Decoration
</div>

Disabled panel

<div class="pointer-none opacity-50">
  Disabled Panel
</div>

Accessibility notes

pointer-none is a visual and behavioral helper. It should not be the only way to communicate a disabled state.

For disabled controls, also set the appropriate HTML attribute so assistive technologies receive the correct signal.

<button disabled class="cursor-not-allowed opacity-50">
  Disabled
</button>

Usage notes

• Use pointer-none for decorative overlays and fully disabled regions.
• Combine pointer-none with opacity-50 or cursor-not-allowed to make the disabled state visually clear.
• Use pointer-auto only when a specific child needs to remain interactive inside a pointer-none parent.
• Always pair visual disabled states with the correct HTML disabled attribute or aria-disabled for accessibility.
• Do not rely on pointer-none alone to secure sensitive UI — it is a visual utility, not an access control.