Pointer events

Pointer-event utilities control whether an element reacts to pointer interactions. Use pointer-none to make an element click-through and pointer-auto to restore default behavior.

Disabling pointer events

Apply pointer-none to prevent an element from receiving any pointer interaction — clicks, hovers and cursors pass through to whatever is behind it.

<a href="#" class="ln-button pointer-none">Disabled link</a>
<a href="#" class="ln-button">Normal link</a>

Restoring pointer events

Use pointer-auto on a child to re-enable interaction inside a pointer-none parent.

<div class="pointer-none border p-3 mb-3">
  <p class="mb-2">This text is click-through.</p>
  <a href="#" class="ln-button pointer-auto">But this button works</a>
</div>

Reference