Icon wechseln bei Hover

[Felix Riesterer]

Liebe Steffi_,

bitte zitiere sinnvoll und nicht pauschal alles. Das mag man in E-Mails so machen, damit der bisherige Verlauf der Diskussion nachvollziehbar ist, hier aber kann man in der nested-Ansicht den Verlauf direkt nachvollziehen, wobei durch Vollzitate erzeugte Dopplungen eher stören. Danke.

Am HTML und CSS Code könnte ich natürlich etwas ändern nur ich weiß nicht, wie es dann mit Updates usw. ausschaut wenn ein Kollege diese regelmäßig einspielt.

Magst Du das herausfinden? Immerhin sollte das Update (wovon eigentlich? Wordpress oder sowas?) von euch kommen und solche Detailverbesserungen beinhalten. Selbst wenn Du jetzt JavaScript einsetzen möchtest, wirst Du um Anpassungen am CSS nicht herum kommen, es sei denn, Du erstellst eine ergänzende CSS-Datei, die dann von JavaScript eingebunden wird, und in der dann die Hover-Bilder definiert werden. Aber wozu? Eine reine CSS-Lösung ist hier definitiv zu bevorzugen!

Am HTML würde ich erst etwas ändern, wenn es gute Gründe dafür gibt.

Interessanter ist daher die JavaScript Option. In meinem Projekt habe ich die jQuery Version jquery-2.1.0.min.js eingebunden. Würde es damit gehen?

Ja, damit würde es gehen. Wieviel JavaScript kannst Du denn schon? Und wieviel jQuery?

Ich würde den Wert des href-Attributs an den Klassennamen des dl-Elements anhängen lassen:

jQuery(document).ready(function ($) {
    $("dl.settings a[href]")
    .mouseenter(function (event) {
        $("dl.settings").addClass(
            event.target.attr("href")
        );
    })
    .mouseleave(function (event) {
        $("dl.settings").removeClass(
            event.target.attr("href")
        );
    })
});

Keine Ahnung, ob das so funzt. Jedenfalls braucht es dazu passende Selektoren im CSS-Code, um die visuellen Veränderungen überhaupt zu erhalten:

dl.settings.password {
    background-image: url(password.png);
}

Liebe Grüße,

Felix Riesterer.