Интерактивность
Утилиты для управления тем, реагирует ли элемент на события указателя.
| Class | Styles |
|---|---|
pointer-events-auto | pointer-events: auto; |
pointer-events-none | pointer-events: none; |
Используйте утилиту pointer-events-none для того, чтобы элемент игнорировал события указателя, такие как :hover и события click:
Нажмите на иконки поиска, чтобы увидеть ожидаемое поведение
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="Поиск" 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="Поиск" class="..." /></div>События указателя по-прежнему будут срабатывать на дочерних элементах и передаваться элементам, которые находятся "под" целевым элементом.
Используйте утилиту pointer-events-auto для возврата к поведению браузера по умолчанию для событий указателя:
<div class="pointer-events-none md:pointer-events-auto ..."> <!-- ... --></div>