Class ändern bei Hover

[Auge]

Hallo

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.

<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 …

<p><a href="admin/settings"><span class="fa fa-folder-o right"></span>Einstellungen</a></p>

… und …

a:focus, a:hover {
color: red;
}

… ändert das Icon beim fokussieren oder hovern des Links zusammen mit dessen Text die Farbe. 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.

<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 …

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