Hintergrund für List-Item mit List-Image
0 0 0 
Felix Riesterer
0
1 
Gernot Back
Hintergrund für List-Item mit List-Image
Hi!
Ich möchte gerne, dass meine Links, die jeweils in ein <li></li>-Tag eingeschlossen sind, beim überfahren eine bestimmte Hintergrundfarbe bekommen und das List-Image soll sich ändern.
Das List-Image ändert sich und die Hintergrundfarbe des Links ändern sich gewünscht.
Mein Problem: Der Hintergrund des List-Images soll sich ebenfalls mitändern (entsprechend dem Hintergrund des Links)!
Das klappt auch eigentlich wunderbar im Firefox, aber der IE macht (wie sollte es auch anders sein) mal wieder Probleme und will den Hintergrund des List-images nicht verändern.
Hier ein Auszug meiner Datei:
<style>
ul {
list-style-type:disc;
list-style-position:inside;
list-style-image:url(file:///D|/Localhost/sv/design/submenu_bullet_off.gif);
}
li:hover, a:hover {
background-color:#B9B9B9;
list-style-image:url(file:///D|/Localhost/sv/design/submenu_bullet_on.gif);
}
</style>
<body>
<ul><li><a href="#">Hallo</a></li></ul>
</body>
-
hi,
Das klappt auch eigentlich wunderbar im Firefox, aber der IE macht (wie sollte es auch anders sein) mal wieder Probleme und will den Hintergrund des List-images nicht verändern.
Dass der IE :hover ausschließlich für a interpretieren mag, sollte doch bekannt sein.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Nun ja, jetzt ist es auch mir bekannt.
Was ich eigentlich mit meinem Posting bezwecken wollte war, dass vielleicht jemand nen Trick anbietet, mit dem man das umgehen könnte.Ich hätte da zum beispiel die idee, dass sich bei mouseover von <a> die hintergrundfarbe von <li> ändert.
allerdings weiß ich nicht, wie das geht, beim mouseover eines elements eine eigenschaft eines anderen elements zu verändern.
kann mir da vll jemand helfen?-
Lieber antoine,
Was ich eigentlich mit meinem Posting bezwecken wollte war, dass vielleicht jemand nen Trick anbietet, mit dem man das umgehen könnte.
mit Javascript ist Dir zu helfen. Ein Fund aus diesem Forum macht mir das Leben leichter, bis der IE7 vielleicht das hält, was seine Entwickler vollmundig versprechen.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
hi,
Ich hätte da zum beispiel die idee, dass sich bei mouseover von <a> die hintergrundfarbe von <li> ändert.
allerdings weiß ich nicht, wie das geht, beim mouseover eines elements eine eigenschaft eines anderen elements zu verändern.Besorge dir auf irgendeine Weise Zugriff auf das andere Element - über die ID, den Tagnamen, über seine Position dem a gegenüber (parentNode, ...) - und ändere dann seine CSS-Eigenschaften über das style-Objekt, oder verpasse ihm eine andere Klasse ...
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-
-
Hallo antoine,
es geht auch mit reinem CSS ohne JS!
Ich möchte gerne, dass meine Links, die jeweils in ein <li></li>-Tag eingeschlossen sind, beim überfahren eine bestimmte Hintergrundfarbe bekommen und das List-Image soll sich ändern.
Das List-Image ändert sich und die Hintergrundfarbe des Links ändern sich gewünscht.
Mein Problem: Der Hintergrund des List-Images soll sich ebenfalls mitändern (entsprechend dem Hintergrund des Links)!Das klappt auch eigentlich wunderbar im Firefox, aber der IE macht (wie sollte es auch anders sein) mal wieder Probleme und will den Hintergrund des List-images nicht verändern.
Du könntest die Bulletgrafik statt dem List-Item als List-Style-Image dem darin enthaltenen Link, dem du display:block gibst, als nicht wiederholte Hintergrundgrafik am linken Rand zuweisen. Damit der Linktext nicht drüber fließt, verpasst du dem Link auch noch ein passendes padding-left. Dem LI-Element solltest du eine passende width geben sowie dessen margin-left und padding-left auf Null setzen.
Dann kannst du ohne JS mit a:hover arbeiten und Farbe und ggf auch das Hintergrundbullet beim Überfahren mit der Maus austauschen.
Gruß Gernot
-
Gernot, du bist genial ;)
Das war eine Superidee mit einer Hintergrundgrafik^^
Vor allem kann ich so auch durch geschickte Padding-Werte Unterpunkte einfügen ;)Vielen, vielen Dank an dich und natürlich auch die anderen, die so schnell geantwortet haben :)
-