Interactividad
Utilidades para controlar si un elemento responde a eventos del puntero.
| Clase | Estilos |
|---|---|
pointer-events-auto | pointer-events: auto; |
pointer-events-none | pointer-events: none; |
Utiliza la utilidad pointer-events-none para hacer que un elemento ignore los eventos del puntero, como los eventos :hover y click:
Haz clic en los iconos de búsqueda para ver el comportamiento esperado
pointer-events-auto
pointer-events-none
<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="Buscar" 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="Buscar" class="..." /></div>Los eventos del puntero aún se activarán en los elementos secundarios y se transmitirán a los elementos que están "debajo" del objetivo.
Utiliza la utilidad pointer-events-auto para volver al comportamiento predeterminado del navegador para los eventos del puntero:
<div class="pointer-events-none md:pointer-events-auto ..."> <!-- ... --></div>