Frage von xChonx, 119

Wie bekomme Ich diesen Hover-Effekt bei HTML5 hin?

Hallo liebe Community, Ich möchte gerne auf meiner Website einrichten das bei meiner Navigationsleiste, bei dem herüberfahren mit der Maus sich die Icons ändern von z.B: "images/Home.png" zu "images/Homehover.png" das ist nicht das einzige Icon welches ich mit einen Hover Effekt versehen möchte.

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von Balco, 66

Wie hast du deine Standard-Icons angezeigt?

Du kannst mit CSS beim :hover bspw. ein anderes Hintergrundbild anzeigen lassen.

Kommentar von xChonx ,

Und wie mach ich das am besten?

Kommentar von Balco ,

Das kommt darauf an, wie du die bestehenden Icons eingebunden hast. Am Besten setzt du die Icons mit dem CSS-Attribut background-image, dann dasselbe beim :hover.

.element {
background-image: url(blabla);
}
.element:hover {
background-image: url(blablabla);
}
Kommentar von xChonx ,

Und wo muss ich die "class=element" im HTML schreiben? 

Kommentar von Balco ,

Die element-Klasse steht hier nur als Platzhalter, das ist die Klasse deines Menüpunktes.

Kannst du vlt. mal deinen Code posten? Am Besten auf einer anderen Seite (http://pastebin.com/), GF zeigt das manchmal nicht so schön an.

Kommentar von xChonx ,

http://pastebin.com/HTkRs8YN aber bei der Navigationsleiste ist er Schrift anstatt ein Icon weil ich die Icons erst mache :) SOll erstmal am Beispiel von Home sein :)

Kommentar von Balco ,

Du könntest jedem a-Element eine eigene Klasse geben (bspw. navHome) und dann im CSS so stylen, wie mein Code oben.

Kommentar von xChonx ,

Aber irgentwie ist jetzt garnichts da :( 

HTML: http://puu.sh/oVr83/84f5c7a7e0.png

CSS: http://puu.sh/oVr9d/3e70055cbf.png

Kommentar von Balco ,

Du musst der Klasse noch ein display: block geben, sonst hats die Masse 0px * 0px oder so.

Dann hast du im HTML noch einen Fehler, bei der Klasse fehlen die "".

Kommentar von xChonx ,
Kommentar von Balco ,

Du brauchst noch das display: block, sonst kannst du keine Breite/Höhe angeben. Am besten fasst du die allgemeinen Styles zusammen und änderst nur das Bild.

Etwa so: http://pastebin.com/grMzHbSH

Kommentar von xChonx ,

Hab das jetzt so gemacht... Geht aber immernoch nicht :(

Sry ich bin noch am Anfang bei Programmierung von Websiten via HTML und CSS xD

CSS: http://pastebin.com/pvcSJC0j

HTML: http://pastebin.com/5eu75HCk

Kommentar von Balco ,

Ich habe es mit deinem Code mal auf JSFiddle nachgebaut und den Hintergrund durch eine Farbe ersetzt, da funktioniert es.

JSFiddle: https://jsfiddle.net/TheBalco/s7sr2pb0/

Hast du die Seite online, damit ich mir die mal ansehen könnte?

Edit: Im HTML solltest du auch für den Hintergrund der ganzen Seite CSS verwenden, nicht das HTML-Attribut "background" ... nur als Nebenbemerkung ;)

Kommentar von xChonx ,

Hab das aber mal so gehört das man es in die HTML schreibt. Habe jetzt gelöscht.. Jetzt wird mir zwar das Icon mit dem Hover effekt angezeigt (Hintergrund hatte wohl das Icon überdeckt. Aber 1. weis ich nicht wo ich das Hintergrundbild definieren muss. Und das Icon ist jetzt ganz wo anders als die anderen Navigationspunkte.

Kommentar von Balco ,

So, ich hab jetzt hier nochmal was angepasst mit Hintergrund und Navigations-Bildern. Schau mal, ob du es verstehst: https://jsfiddle.net/TheBalco/s7sr2pb0/

Kommentar von xChonx ,

Das mit den Hintergrund funktioniert nicht. Und wie bekomme ich die Icons so hin das die sich alle mittig orientieren?

Kommentar von Balco ,

Ich habe das Beispiel nochmals angepasst, damit die Icons zentriert sind.

Was funktioniert beim Hintergrund nicht?

Kommentar von xChonx ,

Es wird einfach nicht der Hintergrund gesetzt bei mir wenn ich /images/background.jpg verwende.

Kommentar von Balco ,

Dann ist die URL nicht korrekt / das Bild kann nicht gefunden werden. Existiert das Bild tatsächlich unter diesem Pfad?

Kommentar von xChonx ,

Ok das mit den Hintergrund geht nun. Aber 1, wird mir mein Home Icon so komisch angezeigt und 2. vergrößert es sich beim Hovern.

Ohne hover: http://puu.sh/oY0kS/4da7171457.jpg

Mit hover: http://puu.sh/oY0ol/35069a88a3.jpg

Kommentar von Balco ,

Zu 1. kannst du beim .nav folgendes einfügen, damit es nicht wiederholt wird:

background-repeat: no-repeat;

Zu 2.: Da werden die beiden Bilder wohl nicht gleich gross sein, sonst sollte das nicht auftreten.

Kommentar von xChonx ,

Gut großes Dankeschön erstmal :) Das erstmal das was ich brauchte. Habe dich geaddet, fals ich noch eine Frage habe :)

Kommentar von Balco ,

Kein Problem, frag einfach, wenn du Hilfe brauchst :)

Antwort
von medmonk, 61

Das ganze solltest du mit Hilfe von CSS umsetzen. Idealerweise die Grafiken als Sprite abspeichern und mit Hilfe von background-position den Hover-Effekt umsetzen. 

Kommentar von xChonx ,

Danke für das Video werde es mal versuchen :)

Antwort
von Ntvz4, 72

Du könntest die zwei Bilder mit CSS übereinanderlegen und eines ausblenden. Beim :hover dann je nachdem einblenden

Kommentar von xChonx ,

Und wie mach ich  das denn :)?

Keine passende Antwort gefunden?

Fragen Sie die Community