События указателя
Свойство События указателя (Pointer Events) позволяет сделать элемент невосприимчивым к действиям курсора. Добавив свойство элементу, вы можете настроить, чтобы он не реагировал на наведение или клик курсора мыши и тап на сенсорном экране.
Добавить опцию: панель Дизайн → раздел Внешний вид → нажмите «+» справа от параметра События указателя.
Вы можете выбрать следующие параметры:
-
Нет (None) — элемент не реагирует на указатель и пропускает действия указателя (например, клик) к нижним слоям.
-
Авто (Auto) — элемент реагирует на указатель (значение по умолчанию).
Как использовать свойство События указателя на практике?
Кейс: у нас есть полупрозрачный оверлей, который перекрывает весь экран, но пользователю нужно дать возможность кликать на элементы под ним.
Реальный пример использования: При наведении курсора на блок нужно затемнять весь экран, кроме этого блока.
Без наведения:
При наведении:
Чем здесь поможет свойство События указателя? Чтобы разобраться, посмотрим на реализацию верстки для этой задачи. Шаги:
-
Создать оверлей для затемнения: добавить Div-блок с темным фоном и с высотой 100vh, задать ему абсолютное позиционирование и непрозрачность 0%.
-
Добавить на оверлей анимацию, чтобы он становился видимым при наведении на блок. Анимация «При наведении», триггер — блок, на который будет наводиться курсор, эффект — непрозрачность от 0 до 90% (нужное вам значение).
-
Задать Z-index: для оверлея — 1, для области наведения — 2, это нужно, чтобы область наведения отображалась поверх оверлея.
Готово: При наведении курсора на блок появляется затемнение. Когда убираем курсор, затемнение также уходит.
Проблема, которая возникает при такой реализации — недоступность остальных кнопок на странице. По умолчанию оверлей визуально невидим, но он перекрывает все остальные элементы сайта, т.к. занимает по высоте весь экран и позиционирован абсолютом. Поэтому все кнопки просто не работают — курсор не может до них дотянуться.
Решить проблему поможет свойство События указателя:
Нужно добавить оверлею свойство События указателя со значением Нет — и он перестанет существовать для курсора, при этом визуально будет отображаться на сайте.
Таким образом, оверлей будет пропускать действия курсора к находящимся под ним кнопкам, и пользователь сможет по ним кликать.