Beispiel:CSS3 pointer-events.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html> <head>

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
 <style>
   p.nicht_klickbar {
       pointer-events: none;
   }
   p.beispiel {
       border: thin 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: rgb(150 150 200 / 0.3);
       color: #c32e04;
   }
 </style>
 <title>Beispiel: CSS pointer-events</title>

</head> <body>

Beispiel: CSS pointer-events

Achten Sie auf die Auswählbarkeit und Markierbarkeit mit Maus bzw. Tastatur.

normales Verhalten

Ein Textabsatz, der einen Link auf die Startseite des Wikis <a href="https://wiki.selfhtml.org">wiki.selfhtml.org</a> enthält.

Ein zweiter Textabsatz mit einem Link auf <a href="https://example.com">example.com</a>. Dieser überdeckt den anderen Absatz teilweise.

pointer-events: none;

Ein Textabsatz, der einen Link auf die Startseite des Wikis <a href="https://wiki.selfhtml.org">wiki.selfhtml.org</a> enthält.

Ein zweiter Textabsatz mit einem Link auf <a href="https://example.com">example.com</a>. Dieser überdeckt den anderen Absatz teilweise.

</body> </html>