SVG/Tutorials/pointer-events
Die Eigenschaft pointer-events ermöglicht es, Elemente gezielt von Interaktionen durch Maus und teilweise auch Tastatur auszuschließen. Es war ursprünglich Teil der SVG-Spezifikation, um genauer zu kontrollieren, wo in einer Form ein Benutzer interagieren kann.[1]
Inhaltsverzeichnis
pointer events in CSS
Erlaubt sind dabei folgende Werte
-
auto
, das Element verhält sich „ganz normal“ so, als obpointer-events
nicht gesetzt wäre, Voreinstellung -
none
, das Element reagiert nicht auf Interaktionen -
inherit
, übernimmt den Wert des Elternelements
p.nicht_klickbar {
pointer-events: none;
}
p.beispiel {
border: thin solid #d5d5d5;
...
}
p.beispiel+p {
position: relative;
width: auto;
padding: 3em;
margin: 0 auto -7em;
top: -8em;
background-color: rgb(150 150 200 / 0.3);
color: #c32e04;
}
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.
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>
pointer-events
bestimmt, ob ein Element mit der Maus ausgewählt werden kann.
Anwendungsbeispiel
<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;
}
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
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
- Referenz: pointer-events
Quellen
- ↑ bitsofco.de: There’s no reason to use pointer-events for HTML elements von Ire Aderinokun, 2018
example.com
ist nicht mehr mit der Maus oder per Fingertap erreichbar.