|
|||
navi mit hover (komplettes bild verschieben)
Mahlzeit,
bei "normalen" Navigationen mit Bildern, setz ich den Hover effekt unter das Bild und verschiebe das beim Hover, soweit ja kein Problem. Ich will aber diesmal das ganze Bild für alle Navi punkte ändern, da diese dann grau dargestellt werden sollen. Ich habe es mit : CSS Sprites: Image Slicing's Kiss of Death probiert, das Problem ist aber dass das Bild nur im Bereich des Links gezeigt wird, mit overflow: visible, hab ich das Problem auch nicht gelöst bekommen. Hat jemand da Tipps bzw. Links? Vielen Dank schonmal! Alex |
Sponsored Links |
|
|||
In Bezug auf das Beispiel unter dem Link müsstest Du eigentlich dem <ul> die Grafik geben und auch nur beim <ul> das hover definieren. Sobald die <ul>-Liste von der Maus berührt wird, wechselt eben das gesamte Hintergrundbild des <ul>.
|
Sponsored Links |
|
|||
Hey,
danke schonmal. Das Problem dabei ist ja nur, das zwar das ul das ganze Bild haben soll, aber jenachdem auf welchem li das hover ist, das Bild sich ändert. Per JS ist das ja kein Problem, würde aber wenn es geht gerne nur auf css setzen. Gruß Alex |
|
|||
Zitat:
Wenn ich dich jetzt richtig verstanden habe, dann sollen bei hover (egal über welchem LI) alle Grafiken farbig dargestellt werden? Dann mache es so, wie threadi gesagt hat, und ändere zusätzlich das Hintergrundbild in dieser Art: Directupload.net - ze2l5zun.png Für den IE-6 wird ul:hover aber nicht funktionieren. IMO wäre das aber jetzt nicht sooo schlimm. Grüße gaby Geändert von gaby (28.07.2012 um 16:56 Uhr) Grund: tippfehler |
|
|||
Hey, nicht ganz.
Ich hab mal ne Grafik angehängt die das verdeutlicht. Die erste Reihe ist der Ausgangszustand. Alle Bilder werden normal dargestellt. Danach sind dann die 3 Kombinationen die es gibt. Blau = Hover / Aktiv Grau = Diese Bilder sollen dann auch verändert werden wenn der Hover auf dem anderen (Blauen ist). Ich hoffe es ist jetzt verständlicher Ist sowas noch mit CSS möglich? Gruß |
|
|||
Moin,
Ja: Code:
ul li { background-image: url("/pfad/zum/default/bild.png"); } ul:hover li { background-image:url("pfad/zum/grauen/bild.png"); } ul:hover li:hover { background-image: url("/pfad/zum/bild/bei/hover.png"); } Edit: Du kannst natürlich noch mit IDs auf den Listenelementen arbeiten, um unterschiedliche Bilder für die Menüpunkte zu haben. Außerdem solltest du CSS Sprites verwenden. Ist halt nur ein grobes Beispiel von mir. gruß, take |
|
||||
Hallo,
hier nochmal ein kleines Beispiel, welches die Vorgehensweise verdeutlichen soll: - Untergeordnete Liste mit Hover-Effekt Gruß, lotti.
__________________
Empfehlenswerte Links: jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten | mazzo | CSS | 10 | 05.04.2012 18:32 |
Navi: Eltern-Element verbreitert sich beim hover auf Kind-Element | img | CSS | 0 | 07.12.2010 19:42 |
grafische Navigation horizontal zentrieren, klappt nicht | lila_3 | CSS | 4 | 30.11.2010 11:25 |
IE verschiebt Navi Menü | macmensa | CSS | 7 | 17.08.2009 17:45 |
Probleme mit horizontaler Navi rechts | lila_3 | CSS | 2 | 14.07.2009 22:36 |