События указателя

Классы pointer-event-none и pointer-event-auto задают свойство pointer-events: элемент либо пропускает щелчки, наведение и касания к тому, что лежит под ним, либо принимает их сам. Берите их для декоративных слоёв поверх кнопок и ссылок.

Пример

Над каждой кнопкой лежит полупрозрачный слой. Наведите указатель: слой с pointer-event-none пропускает его к кнопке, слой с pointer-event-auto перехватывает.

HTML

<div class="grid grid-col-1 sm:grid-col-2 gap-4">
  <div class="flex flex-col gap-1">
    <div class="relative">
      <button type="button" class="w-full p-x-3 p-y-1 border border-outline radius-ui bg-surface color-on-surface cursor-pointer hover:bg-primary-container hover:color-on-primary-container">Наведите указатель</button>
      <div class="absolute inset-0 radius-ui bg-primary-transparent-overlay pointer-event-none"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">слой сверху: pointer-event-none</code>
    <span class="text-1/2 color-on-surface-variant">Указатель проходит сквозь слой — кнопка реагирует.</span>
  </div>
  <div class="flex flex-col gap-1">
    <div class="relative">
      <button type="button" class="w-full p-x-3 p-y-1 border border-outline radius-ui bg-surface color-on-surface cursor-pointer hover:bg-primary-container hover:color-on-primary-container">Наведите указатель</button>
      <div class="absolute inset-0 radius-ui bg-primary-transparent-overlay pointer-event-auto"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">слой сверху: pointer-event-auto</code>
    <span class="text-1/2 color-on-surface-variant">Слой перехватывает указатель — кнопка не реагирует.</span>
  </div>
</div>

Классы

Класс	CSS	Значения
`pointer-event-none`	`pointer-events: none`	—
`pointer-event-auto`	`pointer-events: auto`	—

Условия (что это): ширина экрана — нет; состояния — нет.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Применение

Декоративный слой — градиент, блик, рамку — делают прозрачным для указателя, чтобы под ним работали ссылки и кнопки:

HTML

<div class="relative">
  <a href="/catalog/">Каталог</a>
  <div class="absolute inset-0 pointer-event-none bg-primary-transparent-overlay"></div>
</div>

pointer-event-none наследуется. Чтобы внутри такого блока снова принимал указатель один элемент, поставьте ему pointer-event-auto.

Название класса — pointer-event-*, в единственном числе.

Ограничения

Класс не делает элемент недоступным: на него по-прежнему можно перейти клавишей Tab и нажать Enter. Для недоступной кнопки используйте атрибут disabled, для блока — inert.
С pointer-event-none у элемента не срабатывают и hover:-классы, и вид курсора cursor-*.
Префиксов ширины экрана и состояния у семейства нет.

Навигация

Главное

Документация

Содержание