pointer‑events. МДН
ЦСС‑свойство pointer-events определяет поведение элемента при наведении курсора или при нажатии.
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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.