CSS-Eigenschaft pointer-events

Die Eigenschaft pointer-events definiert, ob ein Element auf Pointer-Ereignisse reagiert oder nicht.

Diese Eigenschaft ist eine SVG-Eigenschaft und ist nicht in CSS-Spezifikationen definiert.

Es gibt viele Werte, die SVG-Elemente anwendbar sind, aber nur drei dieser Werte sind auf HTML-Elemente anwendbar.

Anfangswert	auto
Gilt für	Alle Elemente
Geerbt	Ja
Animierbar	Nein
Version	Scalable Vector Graphics (SVG) 1.1 (Second Edition).
DOM Syntax	object.style.pointerEvents = "auto";

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div.example {
      pointer-events: none;
      }
      div.example2 {
      pointer-events: auto;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft pointer-events</h2>
    <h3>Pointer-events: none</h3>
    <div class="example">Hier klicken: <a href="https://www.w3docs.com/learn-javascript.html">JavaScript Tutorial</a></div>
    <h3>Pointer-events: auto</h3>
    <div class="example2">Hier klicken: <a href="https://de.w3docs.com/css-lernen.html">CSS-Tutorial</a></div>
  </body>
</html>

Versuch es selber!

Bewegen Sie im angegebenen Beispiel die Maus über die Elemente, um zu sehen, welche auf die Zeigerereignisse reagiert.

Dieses Beispiel zeigt, wie Zeigerereignisse so spezifiziert werden können, dass sie durchfallen oder von zugrunde liegenden Elementen aufgefangen werden:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Beispiel für die Eigenschaft 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>

Versuch es selber!

Werte

Wert	Beschreibung
none	Das Element reagiert nie auf die Zeigerereignisse.
auto	Die Elemente akzeptieren die Zeigerereignisse wie Klicks, Hover usw. Das ist der Standardwert dieser Eigenschaft.
initial	Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit	Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

SVG-Werte

visiblePainted	Das Element kann nur dann das Ziel eines Zeigerereignisses sein, wenn die Eigenschaft visibility auf visible eingestellt ist. wenn sich ein Mauszeiger über der Innerseite des Elements befindet. wenn die Eigenschaft fill auf einen anderen Wert als none eingestellt ist. wenn sich ein Mauszeiger über dem Umkreis des Elements befindet. wenn die Eigenschaft stroke auf einen anderen Wert als none eingestellt ist.
visibleFill	Das Element kann nur dann das Ziel eines Zeigerereignisses sein, wenn die Eigenschaft visibility auf visible eingestellt ist. wenn sich ein Mauszeiger über der Innerseite des Elements befindet.
visibleStroke	Das Element kann nur dann das Ziel eines Zeigerereignisses sein, wenn die Eigenschaft visibility auf visible eingestellt ist. wenn sich der Mauszeiger über dem Umkreis des Elements befindet.
visible	Das Element kann nur dann das Ziel eines Zeigerereignisses sein, die Eigenschaft visibility auf visible eingestellt ist. sich der Mauszeiger entweder über der Innerseite oder dem Umkreis des Elements befindet.
painted	Das Element kann nur dann das Ziel eines Zeigerereignisses sein, wenn sich der Mauszeiger über der Innerseite des Elements befindet. wenn die Eigenschaft fill auf einen anderen Wert als none eingestellt wenn sich der Mauszeiger über dem Umkreis des Elements befindet. wenn die Eigenschaft stroke auf einen anderen Wert als none eingestellt ist.
fill	Das Element kann nur dann das Ziel eines Zeigerereignisses sein, wenn sich der Zeiger über der Innerseite des Elements befindet.
stroke	Das Element kann nur dann das Ziel eines Zeigerereignisses sein, wenn sich der Zeiger über dem Umkreis des Elements befindet.
all	Das Element kann nur dann das Ziel eines Zeigerereignisses sein, wenn sich der Zeiger über der Innerseite oder dem Umkreis des Elements befindet.