Pointer Events

vel-src: interactivity.css

Utilities for controlling whether an element responds to pointer events.

Class	Properties
vel-pointer-events-none	pointer-events: none
vel-pointer-events-auto	pointer-events: auto

Examples

Overlay that passes clicks through

example.html

<div style="position:relative;display:inline-block">
  <button class="vel-btn vel-btn-primary">
    Clickable button
  </button>
  <div class="vel-pointer-events-none vel-absolute" style="inset:0;background:rgba(255,0,0,0.1);border-radius:0.5rem">
    <!-- This overlay won't block clicks -->
  </div>
</div>

Disabled interactive element

Disabled link (non-clickable)

example.html

<a class="vel-pointer-events-none vel-text-muted vel-inline-block vel-opacity-50" href="#" style="text-decoration:none;padding:0.5rem 1rem">
  Disabled link (non-clickable)
</a>