Link hover mehrere Backgrounds

[Blackout289]

Hallo Leute,

habn Problem
Und zwar möchte bei einem Link (hover) mehrere Hintergründe setzen (Schatteneffekt)
Also Links Rechts und Mitte (= oben unten).

#mainmenu ul li a:hover{
background:url(./mainmenuhovercenter.png) top center repeat-x;
}

Funktioniert so wies soll, aber wie bekomm ich jetzt die Backgrounds für die Linke und Rechte Seite hin??

MfG

 

[kleeaar]

AW: Link hover mehrere Backgrounds

könntest ja mit :before und :after arbeiten

also so:

#mainmenu ul li a:hover:before{
content:url(./mainmenuhoverleft.png) top center repeat-x;
}
#mainmenu ul li a:hover{
background:url(./mainmenuhovercenter.png) top center repeat-x;
}
#mainmenu ul li a:hover:after{
content:url(./mainmenuhoverright.png) top center repeat-x;
}

Grüße

 

[Blackout289]

AW: Link hover mehrere Backgrounds

Danke,
funktioniert leider nicht
Abgesehen davon dass es von der Höhe nicht richtig angeziegt wird (erstmal egal^^),
wird bspw. die linke Grafik nur links der Liste (ul) angezeigt und nicht vor dem jeweiligen Element (li)..

 

[MegaAdi]

AW: Link hover mehrere Backgrounds

warum deklarierst du nicht für die li-Elemente ein Hintergrund-Bild das gleich alle "Schatten" beinhaltet und passt die Größe der li-Elemente so an, dass alles korrekt dargestellt wird?

Mit CSS3 kommt etwas sehr tolles in diese Richtung: . Vielleicht kannst du ja auch damit etwas anfangen

Gruß Adrian

 

[Blackout289]

AW: Link hover mehrere Backgrounds

Weil die Elemente schon verschieden groß sein sollen...
CSS3 möchte ich noch nicht verwenden, da s der IE8 mal wieder nich kann (ham noch nicht viele den 9er)

 

[Myhar]

AW: Link hover mehrere Backgrounds

Vielleicht wäre es sinnvoll, deine Schattenelemente gleich in die Hauptgrafik zu integrieren und diese dann dementsprechend zu positionieren?
Ansonsten kannst du für mehrere Elemente den HG ändern, indem du dein CSS einfach erweiterst:

#mainmenu ul li a:hover span { Deine Definitionen}

#mainmenu ul li a:hover span span { Deine Definitionen} // usw. ... also für alle <span> eine eigene Definition erstellen.