CSS свойство pointer-events

Свойство pointer-events позволяет контролировать действия, при которых элемент является событием мыши.

Если оно имеет значение none, то курсор проходит сквозь этот элемент и взаимодействует с теми, которые находятся под ним.

Это значение и рассмотрено в этой заметке

2
3
4
5
6

Синтаксис

Использование значения none

1. Наложение полупрозрачных элементов

Используя pointer-events: none; можно легко накладывать любые полупрозрачные элементы с нестатичным позиционированием, не боясь, что они перекроют ссылки и другие рабочие области.

Нажмите на кнопку, чтобы наложить такие слои поверх всей страницы:

наложить
убрать

Несмотря на то, что это свойство наследуется, его дочерние элементы могут иметь другое значение, например, auto. В примере это блок с цифрой 1 в нижнем левом углу страницы.

2. Запрет взаимодействия с изображениями

По умолчанию картинки можно сохранять, перетаскивать мышкой и т.д. pointer-events: none; сделает их невидимыми для нее.

3. Сокрытие каких-либо кликабельных элементов другой информацией

Про это я описывать не буду, т.к. это уже не совсем честные моменты использования этого свойсва.

Смотрите также:

CSS курсоры

Наглядные примеры отображения курсоров мыши свойством cursor

Добавить комментарий:

Ваш комментарий отправлен!