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

Свойство События указателя (Pointer Events) позволяет сделать элемент невосприимчивым к действиям курсора. Добавив свойство элементу, вы можете настроить, чтобы он не реагировал на наведение или клик курсора мыши и тап на сенсорном экране.

Добавить опцию: панель Дизайн → раздел Внешний вид → нажмите «+» справа от параметра События указателя.

Вы можете выбрать следующие параметры:

Нет (None) — элемент не реагирует на указатель и пропускает действия указателя (например, клик) к нижним слоям.

Авто (Auto) — элемент реагирует на указатель (значение по умолчанию).

Как использовать свойство События указателя на практике?

Кейс: у нас есть полупрозрачный оверлей, который перекрывает весь экран, но пользователю нужно дать возможность кликать на элементы под ним.

Реальный пример использования: При наведении курсора на блок нужно затемнять весь экран, кроме этого блока.

Без наведения:

При наведении:

Чем здесь поможет свойство События указателя ? Чтобы разобраться, посмотрим на реализацию верстки для этой задачи. Шаги:

Создать оверлей для затемнения: добавить Div-блок с темным фоном и с высотой 100vh, задать ему абсолютное позиционирование и непрозрачность 0%.

Добавить на оверлей анимацию, чтобы он становился видимым при наведении на блок. Анимация «При наведении», триггер — блок, на который будет наводиться курсор, эффект — непрозрачность от 0 до 90% (нужное вам значение).

Задать Z-index: для оверлея — 1, для области наведения — 2, это нужно, чтобы область наведения отображалась поверх оверлея.

Проблема, которая возникает при такой реализации — недоступность остальных кнопок на странице. По умолчанию оверлей визуально невидим, но он перекрывает все остальные элементы сайта, т.к. занимает по высоте весь экран и позиционирован абсолютом. Поэтому все кнопки просто не работают — курсор не может до них дотянуться.

Решить проблему поможет свойство События указателя:

Нужно добавить оверлею свойство События указателя со значением Нет — и он перестанет существовать для курсора, при этом визуально будет отображаться на сайте.

Таким образом, оверлей будет пропускать действия курсора к находящимся под ним кнопкам, и пользователь сможет по ним кликать.