ЦСС‑свойство pointer-events определяет поведение элемента при наведении курсора или при нажатии.

Значение pointer-events: none заставит элемент игнорировать наведение и нажатие. Так можно сделать прокликивающийся насквозь декоративный элемент или отключить состояние ховера. Шарик в примере не кликается и не мешает выделению текста под ним.

.sale-ball {
  pointer-events: none;
}

Новый год приближается, но зачем его ждать?

Предлагаем уже дарить друзьям, родным, любимым, суженым, ряженым, коллегам, начальникам, подчинённым, товарищам и единомышленникам плакаты, подписку на лекции, любую нашу электронную книгу или полку, обучение на подготовительных курсах и даже на первой ступени в Школах дизайнеров, редакторов и руководителей со скидкой 24% до конца 2023 года.

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

Использовать pointer-events: none для ссылок, кнопок или полей ввода не надёжно — элемент всё ещё можно будет выбрать и активировать с клавиатуры клавишами таб и пробел. Чтобы отключить кнопку или поле ввода, используйте атрибут disabled, а чтобы отключить ссылку, замените её на span.

Значение pointer-events: auto возвращает элементу стандартную реакцию на наведение и нажатие. Используется чтобы отменить pointer-events: none, или в редких случаях, когда надо запретить нажатие для элемента‑родителя, но разрешить для некоторых его дочерних элементов.

Предупреждение

Думайте о пользователе и будьте внимательны, чтобы не применить свойство там, где это может запутать и создать проблемы при работе со страницей. Свойство pointer-events — одно из немногих ЦСС‑свойств, которые могут сильно навредить при неправильном использовании.

А ещё любые ограничения взаимодействия в ЦСС, ХТМЛ и Яваскрипте при желании снимаются через инструменты разработчика. Запрет действия на фронтенде не гарантирует, что пользователь не сможет это действие совершить.

Хотите узнать, как надёжно запретить что‑то пользователю? Присылайте вопросы — расскажу :‑)

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы