Propriété CSS pointer-events

La propriété pointer-events définit si un élément réagit aux événements de pointeur ou non.

C'est une propriété SVG et elle n'est pas définie en spécifications CSS.

Il y a beaucoup de valeurs qui sont applicables aux éléments SVG, mais seulement les trois de ces valeurs sont applicables aux éléments HTML.

Valeur initiale	auto
Appliquée à	Tous les éléments.
Héritée	Oui.
Animable	Non.
Version	Scalable Vector Graphics (SVG) 1.1 (Second Edition).
Syntaxe DOM	object.style.pointerEvents = "auto";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div.example {
      pointer-events: none;
      }
      div.example2 {
      pointer-events: auto;
      }
    </style>
  </head>
  <body>
    <h2>La propriété pointer-events</h2>
    <h3>Pointer-events: none</h3>
    <div class="example">Cliquez ici: <a href="https://www.w3docs.com/learn-javascript.html">Tutoriel JavaScript </a></div>
    <h3>Pointer-events: auto</h3>
    <div class="example2">Cliquez ici: <a href="https://fr.w3docs.com/apprendre-css.html">Tutoriel CSS </a></div>
  </body>
</html>

Essayez-vous-même!

Dans l'exemple donné, passez votre souris sur les éléments pour voir lequel réagit aux événements de pointeur.

Cet exemple montre comment les événements de pointeur peuvent être spécifiés pour tomber à travers ou être attrapé par des éléments sous-jacents:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</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>Exemple de la propriété 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>

Essayez-vous-même!

Valeurs

Valeur	Description
none	L'élément ne réagit jamais aux événements de pointeur.
auto	Les éléments acceptent les événements de pointeur tels que clics, survol etc. C'est la valeur initiale de cette propriété.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.

Valeurs uniquement utilisables avec SVG

visiblePainted	L'élément ne peut être la cible d'un événement de pointeur que si la propriété visibility est définie à visible le pointeur de la souris est au-dessus de l'intérieur de l'élément la valeur de la propriété fill n'est pas none le pointeur de la souris est au-dessus de contour de l'élément la valeur de la propriété stroke n'est pas none.
visibleFill	L'élément ne peut être la cible d'un événement de pointeur que si la propriété visibility est définie à visible le pointeur de la souris est au-dessus de l'intérieur de l'élément.
visibleStroke	L'élément ne peut être la cible d'un événement de pointeur que si la propriété visibility est définie à visible le pointeur de la souris est au-dessus de l'intérieur de l'élément.
visible	L'élément ne peut être la cible d'un événement de pointeur que si la propriété visibility est définie à visible le pointeur est au-dessus de l'intérieur de l'élément ou au-dessus du contour de l'élément.
painted	L'élément ne peut être la cible d'un événement de pointeur que si e.g. le pointeur est au-dessus de l'intérieur de l'élément la valeur de la propriété fill n'est pas none le pointeur est au-dessus du contour de l'élément la valeur de la propriété stroke n'est pas none.
fill	L'élément ne peut être la cible d'un événement de pointeur que si le pointeur est au-dessus de l'intérieur de l'élément.
stroke	L'élément ne peut être la cible d'un événement de pointeur que si le pointeur est au-dessus du contour de l'élément.
all	L'élément ne peut être la cible d'un événement de pointeur que si le pointeur est au-dessus de l'intérieur de l'élément ou au-dessus du contour de l'élément.