Pointer-events

Представим ситуацию, когда у нас один 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 */
}