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 Элемент может быть целью события указателя только в случае, если указатель находится над внутренней частью или периметром элемента.

Поддержка браузера

chrome edge firefox safari opera
4.0+ 12.0+ 3.6+ 4.0+ 15.0+

Практикуйте свои знания

Какое свойство CSS используется для изменения реакции элемента на события мыши?
Считаете ли это полезным?