zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden navi mit hover (komplettes bild verschieben)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 27.07.2012, 11:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.07.2012
Beiträge: 3
AlexPi befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.07.2012, 11:25
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 887
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

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>.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.07.2012, 11:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.07.2012
Beiträge: 3
AlexPi befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 28.07.2012, 13:36
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von AlexPi Beitrag anzeigen
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.
Hallo,
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
Mit Zitat antworten
  #5 (permalink)  
Alt 28.07.2012, 21:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.07.2012
Beiträge: 3
AlexPi befindet sich auf einem aufstrebenden Ast
Standard

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ß
Angehängte Grafiken
Dateityp: png pic_hover - Kopie.png (3,2 KB, 5x aufgerufen)
Mit Zitat antworten
  #6 (permalink)  
Alt 29.07.2012, 00:10
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

Moin,

Zitat:
Zitat von AlexPi Beitrag anzeigen
Ist sowas noch mit CSS möglich?
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");
}
Vielleicht hilfts ja, sollte eigentlich so klappen.

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
Mit Zitat antworten
  #7 (permalink)  
Alt 30.07.2012, 10:47
Benutzerbild von lottikarotti
Ein ♥ für's Web
XHTMLforum-Mitglied
 
Registriert seit: 18.04.2012
Ort: Karlsruhe
Beiträge: 396
lottikarotti wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:15 Uhr.