SVG mittels CSS färben - Das geht (THX!)
bearbeitet von beatovichhallo
> sind auch svgs betroffen, deren parent Element gar nicht gehovert werden.
>
> Also im Codepen sind die SVGs in einem Absatz. Der "hovert"...
Ich habe den Test wiederholt
span eingefügt:
~~~html
<p>
<span>New home
<svg class="newHome mouseSensitive">
<use xlink:href="#house"/>
</svg>
</span>,
<span>
small home
<svg class="smallHome mouseSensitive" >
<use xlink:href="#house"/>
</svg></span>,
<span>
great home
<svg class="greetHome mouseSensitive" >
<use xlink:href="#house"/>
</svg></span>,
<span>
classic home
<svg class="mouseSensitive">
<use xlink:href="#house"/>
</svg>!
</span>
</p>
~~~
und css
~~~css
:hover > svg.mouseSensitive, svg.mouseSensitive:hover {
fill: yellow;
}
~~~
Jetzt arbeitet es so, wie ich es erwarte.
Weiss nicht was ich beim gestrigen Text vermasselt habe.
Jetzt bin ich beruhigt.
--
<https://beat-stoecklin.ch/pub/index.html>