Icon wechseln bei Hover
0 
Felix Riesterer
0 
Der Martin
0 Felix Riesterer
0 0 
marctrix
0 Der Martin
0 marctrix
Icon wechseln bei Hover
Guten Morgen,
folgende Ausgangssituation
<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?
-
Liebe Steffi_,
Du willst, dass beim Hovern eines bestimmten Kindelementes sich das Elternelement visuell verändert. Das geht meines Wissens nicht mit CSS alleine, sondern benötigt JavaScript.
Mit CSS alleine kannst Du nur "faken". Das soll heißen, dass Du mit z.B. absoluter Positionierung einen "generierten Inhalt" über das Hintergrundbild des Elternelements legst, damit es so aussieht, als ob sich das Elternelement verändert hätte. In diesem Fall hat es einen Sinn, für das Elternelement
position:relativeeinzustellen, damit sich die Koordinaten für den generierten Inhalt an den Begrenzungen des Elternelements orientieren, und nicht an<body>.Mit JavaScript könntest Du den Klassennamen des Elternelements ergänzen, sodass aus "settings" vielleicht "settings account" wird, worauf du mit einem passenden Selektor in CSS wieder reagieren und ein anderes Hintergrundbild verwenden lassen kannst. Aber ich weiß jetzt nicht, ob Du JavaScript verwenden willst, und ob Du vielleicht sogar ein Framework wie jQuery einsetzt, sodass ich Dir noch kein Code-Beispiel dafür geben kann.
Liebe Grüße,
Felix Riesterer.
-
Du willst, dass beim Hovern eines bestimmten Kindelementes sich das Elternelement visuell verändert. Das geht meines Wissens nicht mit CSS alleine, sondern benötigt JavaScript.
Mit CSS alleine kannst Du nur "faken". Das soll heißen, dass Du mit z.B. absoluter Positionierung einen "generierten Inhalt" über das Hintergrundbild des Elternelements legst, damit es so aussieht, als ob sich das Elternelement verändert hätte. In diesem Fall hat es einen Sinn, für das Elternelement
position:relativeeinzustellen, damit sich die Koordinaten für den generierten Inhalt an den Begrenzungen des Elternelements orientieren, und nicht an<body>.Mit JavaScript könntest Du den Klassennamen des Elternelements ergänzen, sodass aus "settings" vielleicht "settings account" wird, worauf du mit einem passenden Selektor in CSS wieder reagieren und ein anderes Hintergrundbild verwenden lassen kannst. Aber ich weiß jetzt nicht, ob Du JavaScript verwenden willst, und ob Du vielleicht sogar ein Framework wie jQuery einsetzt, sodass ich Dir noch kein Code-Beispiel dafür geben kann.
Hallo Felix,
vielen Dank für deine Erklärung. 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.
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?
-
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 desdl-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.
-
-
-
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-
Lieber Martin,
Ich frage mich allerdings, ob das Gespann aus dl und dd/dt hier überhaupt sinnvoll ist.
es ist sicherlich eine noch längere Definitionsliste. Allerdings hätte ich den Link zum Passwort-ändern im
<dd>erwartet, begleitet von weiteren<dd>wie "E-Mail ändern", "Avatar ändern" usw.Liebe Grüße,
Felix Riesterer.
-
Hallo Felix,
Ich frage mich allerdings, ob das Gespann aus dl und dd/dt hier überhaupt sinnvoll ist.
es ist sicherlich eine noch längere Definitionsliste.
gerade dann ist die gewählte Struktur erst recht nicht mit der Idee "kompatibel". Denn das würde ja implizieren, dass man mehrere(!) unterschiedliche Hintergrundbilder für das dl-Element vorhalten und aktiv schalten müsste, je nachdem welcher der Links in der Liste gehovert wird.
Also doch eher ein hover-Bild für den Link selbst, das als generierter Inhalt (z.B. ::before) absolut aus dem a-Element herauspositioniert wird, wie du schon vorgeschlagen hast?Allerdings hätte ich den Link zum Passwort-ändern im
<dd>erwartet, begleitet von weiteren<dd>wie "E-Mail ändern", "Avatar ändern" usw.Okay. Ändert aber nichts an der Problemstellung. ;-)
Ciao,
Martin
-
-
Ich frage mich allerdings, ob das Gespann aus dl und dd/dt hier überhaupt sinnvoll ist.
Hallo Martin,
ich habe nur einen kleinen Ausschnitt gezeigt. Es gibt noch weitere Optionen
<dl class="settings"> <dt><a href="passwort" rel="nofollow">Persönliche Einstellungen</a></dt> <dd>Kontopasswort ändern</dd> </dl> <dl class="settings"> <dt><a href="newsletter" rel="nofollow">Newslettereinstellungen</a></dt> <dd>Newsletter abonnieren / stornieren</dd> </dl> <dl class="marker"> <dt><a href="rechnungsanschrift" rel="nofollow">Rechnungseinstellungen</a></dt> <dd>Rechnungsadressen bearbeiten</dd> </dl> <dl class="abmelden"> <dt><a href="abmelden" rel="nofollow">Logout</a></dt> <dd>Abmelden</dd> </dl>-
Hej Steffi_,
bei den Antworten der Vorgänger wundert mich, warum niemand fragt, ob Dir ein dt:hover nicht reichen würde?
Wenn es nicht reicht, könnte man sich andere Lösungen überlegen.
Aber auch dann braucht man IMHO kein JS. Mit .settings a:hover könnte man ein Icon über das bestehende setzen, so dass das Icon von .settings nciht mehr zu sehen, weil verdeckt wäre. Vielleicht nicht elegant, aber wenn das bestehende HTML bleiben muss, wäre das ein gangbarer quick-and-dirty-Weg.
AberJS ist hier IMHO auch keine saubere Lösung, weil es auch nur ein Workaround dafür ist, die saubere Lösung (HTML anpassen) nicht angehen zu wollen oder können - zumal das JS ja auch eingebunden werden muss - also muss man auch dafür ans HTML...
Marc
-
Hallo,
bei den Antworten der Vorgänger wundert mich, warum niemand fragt, ob Dir ein dt:hover nicht reichen würde?
wenn du nochmal nachliest, wirst du feststellen, dass ich in meiner ersten Antwort sogar noch einen Schritt weiter gegangen bin und a:hover als Alternativlösung vorgeschlagen habe. Da in Steffis Codebeispiel das dt- und das a-Element quasi zusammenfallen, wäre das de facto dasselbe.
Aber auch dann braucht man IMHO kein JS. Mit .settings a:hover könnte man ein Icon über das bestehende setzen, so dass das Icon von .settings nciht mehr zu sehen, weil verdeckt wäre.
Aber nur als außerhalb des a-Elements positionierter Inhalt, nicht als Hintergrundbild. Denn Hintergründe werden an den Grenzen des Elements abgeschnitten; Inhalt kann über die Grenzen hinausragen.
Den Ansatz hat Felix übrigens schon angerissen.
Du siehst also, dass deine Gedanken im Prinzip auch schon im Spiel waren. :-)
So long,
Martin-
Hej Martin,
Hallo,
bei den Antworten der Vorgänger wundert mich, warum niemand fragt, ob Dir ein dt:hover nicht reichen würde?
wenn du nochmal nachliest, wirst du feststellen, dass ich in meiner ersten Antwort sogar noch einen Schritt weiter gegangen bin und a:hover als Alternativlösung vorgeschlagen habe.
Sry, nicht gelesen, habe aufgehört zu lesen bei "bei der bestehenden Struktur ist das mit CSS allein nicht möglich."... ;-)
Aber nur als außerhalb des a-Elements positionierter Inhalt, nicht als Hintergrundbild
Ja, muss a:hover::before sein. Ich tucker noch im Energiesparmodus auf der linken Spur dahin...
Frohes Neues!
Marc
-
-
-
-