Beispiel:CSS3 pointer-events-2.html
Aus SELFHTML-Wiki
<!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>
#full {
fill:transparent;
stroke: gold;
pointer-events: visibleFill;
}
#full:hover {
stroke: #337599;
}
#ring {
fill:none;
stroke: gold;
}
rect:hover {
stroke: #337599;
stroke-width: .5;
}
</style>
<title>SVG pointer-events</title>
</head>
<body>
<h1>SVG pointer-events</h1>
<p>Der linke Kreis besteht aus einem goldenen Rand und keiner Füllung. Ein :hover auf dem Rand betrifft den Kreis - ein :hover über <code>fill:none</code> lässt das :Hover zum <code>rect</code>.</p>
<p>Der rechte Kreis aus goldenem Rand und transparenter Füllung. Durch <code>pointer-events: visibleFill;</code> wird die durchsichtige Füllung undurchlässig, nicht jedoch der Rand, der außerhalb des Kreisumfangs liegt. </p>
<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>
