CSS/Eigenschaften/Anzeige/pointer-events

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Dieser Artikel behandelt die CSS-Eigenschaft pointer-events. Sie ist nicht zu verwechseln mit der geichnamigen Pointer Event API.


Die Eigenschaft pointer-events ermöglicht es, Elemente gezielt von Interaktionen durch Maus und teilweise auch Tastatur auszuschließen.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Safari

Details: caniuse.com

Beispiel ansehen …
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> p.beispiel { border: 1px solid #d5d5d5; border-radius: 0 8px 8px; background-color: #f1f3f4; line-height: 2; padding: 1em; width: 20em; margin: 3em auto; } p.beispiel+p { position: relative; width: auto; padding: 3em; margin: 0 auto -7em; top: -8em; background-color: rgba(150,150,200,0.3); color: #c32e04; } p.nicht_klickbar { pointer-events: none; } </style> <title>Beispiel: CSS pointer-events</title> </head> <body> <h1>Beispiel: CSS pointer-events</h1> <main> <p>Achten Sie auf die Auswählbarkeit und Markierbarkeit mit Maus bzw. Tastatur.</p> <h2>normales Verhalten</h2> <p class="beispiel">Ein Textabsatz, der einen Link auf die Startseite des Wikis <a href="http://wiki.selfhtml.org">wiki.selfhtml.org</a> enthält. </p> <p class="beispiel">Ein zweiter Textabsatz mit einem Link auf <a href="http://example.com">example.com</a>. Dieser überdeckt den anderen Absatz teilweise. </p> <h2>pointer-events: none;</h2> <p class="beispiel">Ein Textabsatz, der einen Link auf die Startseite des Wikis <a href="http://wiki.selfhtml.org">wiki.selfhtml.org</a> enthält. </p> <p class="beispiel nicht_klickbar">Ein zweiter Textabsatz mit einem Link auf <a href="http://example.com">example.com</a>. Dieser überdeckt den anderen Absatz teilweise. </p> </main> </body> </html>
Die jeweils zweiten Absätze sind so verschoben, dass sie ihre Vorgänger überdecken. Im Normalfall ist deshalb der Text des darunterliegenden Elements nicht mit der Maus auswählbar. Wird für den überdeckenden Absatz festgelegt, dass dieser nicht auf Interaktionen mit der Maus reagieren soll, so hat dies zur Folge, dass nun der überdeckte Absatz mit der Maus bedienbar ist.
Beachten Sie: Enthält das Element, welches nicht mehr auf Interaktionen mit der Maus reagieren soll, keine fokussierbaren Elemente, ist sein Inhalt auch nicht mit der Tastatur auswählbar.
Beispiel ansehen …
a:hover, a:focus, a:active {
  background-color: #f1f3f4;
  color: #c32e04;
}
a[href="http://example.com"] {
  pointer-events: none;
}
<ul>
  <li><a href="http://selfhtml.org">selfhtml.org</a></li>
  <li><a href="http://example.com">example.com</a></li>
</ul>
Der Link zu example.com ist nicht mehr mit der Maus oder per Fingertap erreichbar.

pointer-events bestimmt ob ein Element mit Maus ausgewählt werden kann. Erlaubt sind dabei folgende Werte

  • auto, das Element verhält sich „ganz normal“ so, als ob pointer-events nicht gesetzt wäre, Voreinstellung
  • none, das Element reagiert nicht auf Interaktionen
  • inherit, übernimmt den Wert des Elternelements

Anwendung[Bearbeiten]

Beispiel ansehen …
<fieldset>
    <input id="tn-vielleicht" type="radio" name="teilnahme" value="0" checked="checked">
    <label for="tn-vielleicht">vielleicht</label>
    <input id="tn-nein" type="radio" name="teilnahme" value="-1">
    <label for="tn-nein">nein</label>
    <input id="tn-ja" type="radio" name="teilnahme" value="1">
    <label for="tn-ja">ja</label>
</fieldset>
label{
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 5em;
    padding: .5em;
    border: 2px solid #c32e04;
    text-align: center;
}
:checked + label {
    z-index: 10;
    pointer-events: none;
}
:checked + label + input + label {
    pointer-events: none;
}
input {
    display: none;
}
Das Beispiel zeigt einen Button, der 3 Status haben kann. Technisch handelt es sich um eine Gruppe von drei Radiobuttons. Mithilfe absoluter Positionierung werden die drei label-Elemente übereinander positioniert. Dasjenige Label, was zum ausgewählten Radiobutton gehört, wird durch die Angabe eines z-index sichtbar, für pointer-events werden sowohl dieses als auch das im Quelltext folgende label-Element unempfänglich gemacht.

pointer-events und SVG[Bearbeiten]

pointer-events kennt noch weitere Werte, die allerdings nur für SVG gültig sind.

  • visiblePainted,
  • visibleFill,
  • visibleStroke,
  • visible,
  • painted,
  • fill,
  • stroke,
  • all,

siehe auch[Bearbeiten]