</> Praktum

Главная / CSS / pointer events

Справочник CSS

pointer-events: управление кликами мыши

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

Рабочий пример

.decorative-overlay {
  pointer-events: none;
}
.button[aria-disabled="true"] {
  opacity: .55;
}

Свойство влияет на мышь и касание, но элемент всё ещё может получать фокус с клавиатуры. Для настоящей HTML-кнопки используй disabled, чтобы состояние было понятно всем способам ввода.

Когда применять

pointer-events: none удобен для декоративной иконки или псевдоэлемента поверх ссылки. Не применяй его как единственную защиту от отправки формы.

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

Частые ошибки

  • Считать none заменой атрибута disabled
  • Отключать большой контейнер и терять ссылки внутри
  • Не проверять клавиатурную навигацию

Задание

Добавь декоративный слой поверх карточки так, чтобы вся карточка по-прежнему была кликабельна.

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

Ещё в разделе CSS