pointer-events
Контролирует, реагирует ли элемент на события мыши/тача (клик, hover, drag).
Зачем нужно
Позволяет «отключить» элемент от указателя: клики проходят сквозь него к элементам ниже. Незаменимо для оверлеев, декоративных слоёв и disabled-состояний.
Где используется
- Декоративные оверлеи, которые не блокируют клики
- Disabled-кнопки и ссылки
- SVG — точное управление кликабельными зонами
Code example
/* Элемент "прозрачен" для кликов */
.decorative-overlay {
pointer-events: none;
position: absolute;
inset: 0;
}
/* Disabled-состояние */
.btn:disabled,
.btn--disabled {
pointer-events: none;
opacity: 0.5;
}
/* Включить обратно */
.overlay:hover .child-button {
pointer-events: auto;
}
/* SVG — клик только по заливке */
svg rect { pointer-events: fill; }
/* SVG — клик по обводке и заливке */
svg circle { pointer-events: painted; }