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>

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>

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.

Support de Navigateurs

4.0+ 12.0+ 3.6+ 4.0+ 15.0+


Trouvez-vous cela utile?

Articles Associées