Documentación offline Tailwind CSS main
/ ó ⌘K
por @raupulus

pointer-events

main Ver versión oficial en línea Licencia MITDescargado el 2026-09-15 Bundle .md (1.3 MB) ↓

En esta página
Clase Propiedades CSS
pointer-events-auto pointer-events: auto;
pointer-events-none pointer-events: none;

Examples#

Ignoring pointer events#

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

{

pointer-events-auto

pointer-events-none

}

<!-- [!code classes:pointer-events-none,pointer-events-auto] -->
<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.

Restoring pointer events#

Use the pointer-events-auto utility to revert to the default browser behavior for pointer events:

<div class="pointer-events-none md:pointer-events-auto ...">
  <!-- ... -->
</div>