pointer-events
Реагирует ли элемент на щелчки и касания или пропускает их к тому, что под ним.
Синтаксис
pointer-events: none;Значения
| Параметр | Тип | Описание |
|---|---|---|
| auto | keyword | Реагирует как обычно (по умолчанию). |
| none | keyword | Щелчки проходят сквозь элемент к тому, что за ним. |
Примеры
Декоративный слой, который не мешает нажать на кнопку:
<style>
.wrap { position: relative; }
.overlay {
position: absolute; inset: 0;
background: rgb(255 255 255 / 0.3);
pointer-events: none;
}
</style>
<div class="wrap">
<button onclick="this.textContent = 'Clicked!'">Click me through the overlay</button>
<div class="overlay"></div>
</div>Примечания
pointer-events: none не отключает клавиатуру: на кнопку всё ещё можно перейти клавишей Tab и нажать Enter. Чтобы действительно отключить элемент, используйте атрибут disabled.
См. также
- cursor — Вид указателя мыши над элементом.
- position — Как позиционируется элемент: в обычном потоке или по смещениям.
- user-select — Может ли пользователь выделять текст элемента.
Вопросы и ответы по теме
В учебнике
- Переполнение и слои — Что делать, когда содержимое не помещается в блок — overflow, прокрутка, многоточие — и как z-index решает, какой элемент лежит сверху.