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

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

Это свойство является SVG свойством, и оно не указано в CSS спецификации.

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

Значение по умолчанию	auto
Применяется	Ко всем элементам.
Наследуется	Да
Анимируемое	Нет
Версия	Scalable Vector Graphics (SVG) 1.1 (Second Edition).
DOM синтаксис	object.style.pointerEvents = "auto";

Синтаксис

pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div.example {
      pointer-events: none;
      }
      div.example2 {
      pointer-events: auto;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства pointer-events</h2>
    <h3>Pointer-events: none</h3>
    <div class="example">Нажмите сюда: <a href="https://www.w3docs.com/learn-javascript.html">JavaScript Tutorial</a></div>
    <h3>Pointer-events: auto</h3>
    <div class="example2">Нажмите сюда: <a href="https://www.w3docs.com/learn-css.html">CSS Tutorial</a></div>
  </body>
</html>

Попробуйте сами!

В вышеприведенном примере можете навести указатель мыши на элементы и увидеть, которые из них реагируют на события указателя.

Следующий пример показывает, как может быть обозначен указатель события:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .a {
      fill: #ccc;
      }
      .b {
      fill: #8ebf42;
      }
      .c {
      fill: #1c87c9;
      pointer-events: none;
      }
      .d {
      stroke: #666;
      fill: none;
      pointer-events: all;
      }
      .box:hover {
      stroke: #000;
      stroke-width: 5;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства pointer-events</h2>
    <svg width="300" height="300">
      <g transform="translate(20, 20)">
        <path class="a box" d="M 0 0 L 100 0 L 100 100 L 0 100 z" />
        <path class="b box" d="M 50 50 l 100 0 l 0 100 l -100 0 z" />
        <path class="c box" d="M 100 100 l 100 0 l 0 100 l -100 0 z" />
        <path class="d box" d="M 150 150 l 100 0 l 0 100 l -100 0 z" />
      </g>
    </svg>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
none	Элемент никогда не реагирует на события указателя.
auto	Элемент реагирует на события указателя например (click, hover и др.). Значение по умолчанию.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.

SVG значения

visiblePainted	Элемент может быть целью события указателя в следующих случаях: свойство visibility установлено в значение visible указатель мыши находится над внутренней частью элемента свойство fill установлено в значение отличное от none указатель мыши находится над периметром элемента свойство stroke установлено в значение отличное от none.
visibleFill	Элемент может быть целью события указателя в следующих случаях: свойство visibility установлено в значение visible указатель мыши находится над внутренней частью элемента.
visibleStroke	Элемент может быть целью события указателя в следующих случаях: свойство visibility установлено в значение visible указатель мыши находится над периметром элемента.
visible	Элемент может быть целью события указателя в следующих случаях: свойство visibility установлено в значение visible указатель мыши находится над внутренней частью или периметром элемента. .
painted	Элемент может быть целью события указателя в следующих случаях: указатель мыши находится над внутренней частью элемента свойство fill установлено в значение отличное от none указатель мыши находится над периметром элемента свойство stroke установлено в значение отличное от none.
fill	Элемент может быть целью события указателя только в случае, если указатель находится над внутренней частью элемента.
stroke	Элемент может быть целью события указателя только в случае, если указатель находится над периметром элемента.
all	Элемент может быть целью события указателя только в случае, если указатель находится над внутренней частью или периметром элемента.