Представим ситуацию, когда у нас один html-элемент расположен поверх другого. Но нам нужно, чтобы нижний элемент был кликабельным или реагировал на hover.
В модуле «CSS4-UI» есть такое свойство — pointer-events
.
pointer-events: none
— элемент перестанет реагировать на hover, click и другие события мыши. Он станет «прозрачным» для взаимодействия, а hover и click будут передаваться элементу, лежащему под ним.
pointer-events: auto
— (значение по-умолчанию) включает стандартное поведение элемента.
Изначально свойство «pointer-events» было введено для SVG и должно было стать частью CSS3, но было перенесено в спецификацию CSS4. Кроме «none» и «auto» есть еще несколько значений, но они применимы только к SVG, и мы не будем их рассматривать.
Несмотря на то, что свойство относится к CSS4, pointer-events поддерживается уже большим количеством браузеров и довольно давно. Не работает в IE ниже 11 версии и в Opera Presto. А значит, его можно осторожно использовать для улучшения юзабилити в рамках прогрессивного улучшения.
Проверить, поддерживается ли это свойство браузером, можно с помощью специального теста для Modernizer.
Пример 1
Рассмотрим на практике.
В первом примере для белого градиента, накрывающего текст, pointer-events
установлен в none. Текст легко выделяется мышью сквозь градиент. Даже курсор меняет свою форму со стрелки на выделение текста.
Во втором примере pointer-events
не задан, маска градиента не даёт выделить текст, курсор имеет форму стрелки, как для нетекстовых элементов.
Пример 2
Задача: сделать так, чтобы ссылка в меню становилась некликабельной, если она ведет на эту же страницу.
Обычно в CMS уже есть какой-либо класс для индикации текущей страницы в меню. Допишем ему pointer-events:
.demo-menu a.current {
background: #AAA;
color: #333;
pointer-events: none; /* disables click event */
}