CSS pointer-events — зробити елемент прозорим для кліків

CSS властивість pointer-events визначає, чи реагує елемент на кліки й наведення. Значення none робить його прозорим для миші.

правити

Загальний опис

Найчастіший випадок — декоративний шар поверх контенту: градієнт, іконка, підказка. Без pointer-events: none він перехоплював би кліки, і кнопка під ним перестала б працювати.

Другий випадок — вимкнена кнопка: разом із opacity: .5 вона виглядає й поводиться як неактивна.

правити

Нотатка

pointer-events: none вимикає тільки мишу. З клавіатури елемент усе одно доступний — тож для справді вимкнених кнопок потрібен ще й атрибут disabled.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

pointer-events: auto | none;

Властивість pointer-events може отримувати 2 значень:

auto

Елемент реагує на вказівник як звичайно.

автор: NagarD

правити

none

Елемент прозорий для подій — кліки проходять крізь нього.

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
pointer-events	2+	3.6+	4+	9+	12+	11+

Підтримка: мобільні переглядачі

Переглядач
pointer-events	yes	yes	yes	yes

Приклади

+ запропонувати свій приклад у пісочниці

<div class="wrap">
    <button>Клікни мене</button>
    <div class="shine"></div>
</div>

.wrap { position: relative; display: inline-block; }

.shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgb(255 255 255 / .4), transparent);
    /* без цього рядка кнопка перестане клікатись */
    pointer-events: none;
}