pointer events

Utilities for controlling whether an element responds to pointer events.

2025-04-10

Written by: tdtc

Ignoring pointer events

Use the pointer-events-none utility to make an element ignore pointer events, like :hover and click events:

<div class="relative ...">
  <div class="pointer-events-auto absolute ...">
    <svg class="absolute h-5 w-5 text-gray-400">
      <!-- ... -->
    </svg>
  </div>
  <input type="text" placeholder="Search" class="..." />
</div>
<div class="relative ...">
  <div class="pointer-events-none absolute ...">
    <svg class="absolute h-5 w-5 text-gray-400">
      <!-- ... -->
    </svg>
  </div>
  <input type="text" placeholder="Search" class="..." />
</div>

The pointer events will still trigger on child elements and pass-through to elements that are “beneath” the target.

Ref

• pointer events