Beispiel:CSS3 pointer-events-2.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>
  1. full {

fill:transparent; stroke: gold; pointer-events: visibleFill; }

  1. full:hover {

stroke: #337599; }

  1. ring {

fill:none; stroke: gold; }

rect:hover { 

 stroke: #337599;

stroke-width: .5; } 

 </style>
 <title>SVG pointer-events</title>

</head> <body>

SVG pointer-events

Der linke Kreis besteht aus einem goldenen Rand und keiner Füllung. Ein :hover auf dem Rand betrifft den Kreis - ein :hover über fill:none lässt das :Hover zum rect.

Der rechte Kreis aus goldenem Rand und transparenter Füllung. Durch pointer-events: visibleFill; wird die durchsichtige Füllung undurchlässig, nicht jedoch der Rand, der außerhalb des Kreisumfangs liegt.

<svg viewBox="0 0 40 25" xmlns="https://www.w3.org/2000/svg"> 

 <rect x="5" y="5" height="10" width="20" fill="#c82f04" />

<circle id="ring" cx="5" cy="5" r="3" /> 

 <circle id="full" cx="25" cy="15" r="3"  />

</svg>

</body> </html>

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS3_pointer-events-2.html&oldid=95377“