Autor |
Nachricht |
mcbethy
Threadersteller
Dabei seit: 02.12.2002
Ort: Hamburg
Alter: 41
Geschlecht:
|
Verfasst Do 10.02.2005 16:03
Titel list-style-image bei mouseover austauschbar? |
|
|
Hallo zusammen,
ich brauche mal wieder Hilfe.
Gerade sitze ich an der Umsetzung einer Mini-Seite und mir war danach, alles mit CSS zu realisieren.
Nur dumm, dass ich noch nicht so der Burner bin und an diesem blöden Mouseover-Effekt scheitere.
Link zur Testseite. (Alle Stylesheets sind in diesem Dokument)
Per list-style-image habe ich jedem Punkt ein eigenes Listenbild zugewiesen. Bis dahin kein Problem.
Nun wollte ich jedem auf die gleiche Weise ein Bild für den a:hover Zustand zuweisen. Aber das geht irgendwie nicht.
Ich hatte angenommen, dass es so klappen könnte:
Code: |
.liste#aktuell{
list-style-image:url(../images/navi/aktuell.gif);
}
.liste#aktuell a{
list-style-image:url(../images/navi/aktuell.gif);
}
.liste#aktuell a:hover{
list-style-image:url(../images/navi/aktuell_hi.gif);
} |
Doch mit der Annahme lag ich falsch. Habe ich einen Fehler gemacht oder geht das vielleicht auch gar nicht und ich habe die Arbeit umsonst gemacht?
Büdde helft mir.
|
|
|
|
|
beeviZ
Dabei seit: 30.09.2002
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 10.02.2005 16:44
Titel
|
|
|
du weist in deinem Beispiel ja dem Link das List-style-image zu.
Mit
.liste #aktuell:hover {...}
könnts funktionieren, allerdings Firefox da der IE :hover nur bei Links unterstützt.
Du könntest auch
<li><a href="#" id="aktuell"></a></li>
machen, und dann
li a#aktuell {display:block; height: 100%; background: url(...); padding-left: 30px;}
li a#aktuell:hover {background: url();}
das sollte definitiv funktionieren.
|
|
|
|
|
Anzeige
|
|
|
mcbethy
Threadersteller
Dabei seit: 02.12.2002
Ort: Hamburg
Alter: 41
Geschlecht:
|
Verfasst Do 10.02.2005 17:03
Titel
|
|
|
Ah, danke für die Hilfe. Ich hab's.
Der Hund lag nur ganz wo anders begraben: Ich musste das a vor hover entfernen. Dann klappt es!
//edit
Verflucht! Ich sollte auch im IE testen, ehe ich in Jubel ausbreche. Es hätte so einfach sein können.
Aber eigentlich hast du es ja selbst geschrieben. Der IE packt es nicht.
Zuletzt bearbeitet von mcbethy am Do 10.02.2005 17:04, insgesamt 1-mal bearbeitet
|
|
|
|
|
beeviZ
Dabei seit: 30.09.2002
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 10.02.2005 17:23
Titel
|
|
|
Machs mit der li a + background: url(); -Methode. Dann gehts.
|
|
|
|
|
mcbethy
Threadersteller
Dabei seit: 02.12.2002
Ort: Hamburg
Alter: 41
Geschlecht:
|
Verfasst Do 10.02.2005 17:36
Titel
|
|
|
Das funktioniert zwar, aber wie lässt sich der Text ("Aktuell") unten an der Grafik ausrichten?
Mit padding und margin geht es nicht.
|
|
|
|
|
shaly
Dabei seit: 19.11.2002
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 10.02.2005 17:36
Titel
|
|
|
wenn du display:block machst, sollte das gehen.
|
|
|
|
|
mcbethy
Threadersteller
Dabei seit: 02.12.2002
Ort: Hamburg
Alter: 41
Geschlecht:
|
Verfasst Do 10.02.2005 17:51
Titel
|
|
|
Danke shaly.
Es gibt mit dieser Lösung leider extreme Darstellungsunterschiede zwischen den Browsern.
Hoffentlich bekomme ich das auch noch in den Griff. *seufz*
|
|
|
|
|
shaly
Dabei seit: 19.11.2002
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 10.02.2005 18:00
Titel
|
|
|
google mal nach dem boxmodel-hack. der ie interpretiert margin und padding anders als vorgesehen.
|
|
|
|
|
|
|
|
Ähnliche Themen |
css, ie6, list-style-image...
CSS Aufzählung list-style-image
[css] list-style-image - vertikal ausrichten
[CSS]Hilfe! Warum kein Border um list-style-image?
css list-style-position
CSS: List-image nur bei Hauptmenüpunkten
|
|