Class ändern bei Hover
bearbeitet von AugeHallo
> > Hast du schon probiert, die Schriftfarbe des Elements per Pseudoklasse :hover zu ändern?
>
> bis jetzt noch nicht. Ist es denn möglich wenn ich über den Link fahre dass dann nur das Icon geändert wird?
In deiner Konstruktion nicht, denn das `span`, mit dem das Icon ausgegeben wird, gehört nicht zum Link.
> ~~~html
> <p><span class="fa fa-folder-o right"></span><a href="admin/settings">Einstellungen</a></p>
> ~~~
Aber selbst, wenn das `span` Kind des Links wäre, könnten ohne weitere Maßnahmen nur beide zusammen die Farbe wechseln. Mit dem Code …
~~~html
<p><a href="admin/settings"><span class="fa fa-folder-o right"></span>Einstellungen</a></p>
~~~
… und …
~~~css
a:focus, a:hover {
color: red;
}
~~~
… ändert sich das Icon beim fokussieren oder hovern des Links. Du kannst aber zusätzlich explizite Angaben machen, die beide Bestandteile unterschiedlich färben. Dazu brauchst du aber ein zusätzliches HTML-Element, was evtl. ungewünscht ist.
~~~html
<p><a href="admin/settings"><span class="fa fa-folder-o right"></span><span class="linktext">Einstellungen<span></a></p>
~~~
… wird beim hovern mit folgenden Regeln …
~~~css
a:focus, a:hover {
color: red;
}
a:focus .linktext, a:hover .linktext {
color: black;
}
~~~
… zweifarbig.
Du solltest dich spätestens dann mit SVG beschäftigen, wenn der Wunsch nach mehrfarbigen Icons auftaucht. Vorher kann es natürlich auch nicht schaden. Da es sich dabei um einen XML-Dialekt handelt, steht dir dort grundsätzlich auch CSS zur Verfügung.
Tschö, Auge
--
Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
Terry Pratchett, „Gevatter Tod“