Class ändern bei Hover

[Gunnar Bittersmann]

@@bobby

Warum arbeitest du hier nicht mit einer Hintergrundgrafik? Wäre viel einfacher und zweckmäßiger.

Nein, weder noch.

Die Grafik soll sich ja ändern können. Hintergrund-SVG-Grafiken kann man nicht von außen stylen. Man würde zwei getrennte Grafiken benötigen und deren Aussehen (Farben) in den Grafikdateien festlegen müssen anstatt im Stylesheet.

Bei <a …><svg class="icon" …><use …/></svg> …</a> braucht man nur eine Grafik (symbol) pro Icon (ein SVG für alle Icons) und kann im Stylesheet deren Farben angeben:

.icon
{
  stroke: …;
  fill: …;
}

a:hover .icon, a:focus .icon
{
  stroke: …;
  fill: …;
}

SVG Sprites vs. Icon-Fonts hatte ich bereits verlinkt; darin finden sich Links zu Artikeln von Chris Coyier, von dort kommt man auch zu SVG symbol a Good Choice for Icons.

LLAP 🖖