Icon wechseln bei Hover

[Der Martin]

Hallo,

<dl class="settings">
   <dt><a href="passwort" rel="nofollow">Persönliche Einstellungen</a></dt>
<dd>Kontopasswort ändern</dd>
</dl>

dl {
    padding: 5px 0px;
    width: 48%;
    padding-left: 40px;
    display: inline-block;
    margin-right: 0.5em;
}

.settings {
    background: url("icons/sw/survey.png") no-repeat left transparent;
}

Wenn ich über den Link innerhalb von <dt> fahre möchte ich gerne das Icon wechseln lassen. Wie bekomme ich das hin?

bei der bestehenden Struktur ist das mit CSS allein nicht möglich. Denn das Icon "gehört" einem Vorfahrenelement des Links, den du hovern willst, und CSS kann keine Vorfahrenelemente selektieren.

Du könntest also entweder zähneknirschend den hover-Effekt auf das gesamte dl-Element ausweiten, aber dann korreliert er nicht mehr mit dem klickbaren Bereich des Links. Oder du veränderst die Größen etwas und setzt das Icon dann als Hintergrundbild des Links.

Als letzte Möglichkeit fiele mir noch ein, den hover-Effekt mit Javascript zu realisieren - also dem Link einen mouseover-Handler verpassen, der dann das Großelternelement verändert. Wer kein Javascript zur Verfügung hat, sieht dann eben keinen visuellen Effekt. Schade, aber nicht weiter schlimm.

Ich frage mich allerdings, ob das Gespann aus dl und dd/dt hier überhaupt sinnvoll ist.

So long,
 Martin