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>

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>

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.

Browser-Support

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

Übe dein Wissen

Welche Auswirkungen kann die CSS-Eigenschaft 'pointer-events' haben?
Finden Sie das nützlich?