li background bei hover im IE

[Saltamontes]

Hallo zusammen.

Hab da ein kleines Problem bei dem ich nicht weiter weiß. Ich möchte für eine Navigation einen Hover Effekt erstellen, bei dem ein Hintergrundbild eingeblendet wird. Im Firefox funktioniert das erwartungsgemäß ganz gut, im IE erwartungsgemäß nicht :)

Denke ich muss das über ein JavaScript lösen, bin da allerdings überhaupt nicht fit. Die Tutorials die ich für dynamische Navigationen gelesen habe, beschreiben leider nur die Lösung mit einem JavaScript für aufklappbare Listen. Ich müsste allerdings den selben Listenpunkt einblenden und weiß nicht wie ich das per Script löse.

Wär klasse, wenn mir da wer helfen könnte!

Schonmal danke!

Saltamontes

[Zeromancer]

Hallo Saltamontes,

Ich möchte für eine Navigation einen Hover Effekt erstellen, bei dem ein Hintergrundbild eingeblendet wird.

bitte poste relevanten Quelltext oder zeige uns die Seite online!

Denke ich muss das über ein JavaScript lösen, bin da allerdings überhaupt nicht fit.

Den Hovereffekt kannst du im Regelfall mittels CSS lösen (Pseudoklassen).

Möglich wäre (ungetestet):

<ul id="navi">  
<li><a href="">Link</a></li>  
</ul>

ul#navi a {  
  background:#fff url(bild1.jpg);  
}  
  
ul#navi a:hover {  
  background:#fff url(bild2.jpg);  
}

Mit freundlichen Grüßen,
André

[Saltamontes]

Hier das HTML

<div id="navigation">
 <ul>
  <li><a href="index.php">Punk 1</a></li>
  <li><a href="index.php">Punk 1</a></li>
  <li><a href="index.php">Punk 1</a></li>
 </ul>
</div>

Und das zugehörige CSS

#navigation ul
{
 position:absolute;
 top:0px; left:0px;
 width:168px;
 margin:15px 0px 0px 15px;
 z-index:10;
}

#navigation ul li
{
 list-style:none;
 height:25px;
 margin:5px 0px;
 padding:5px 0px 5px 35px;
}

#navigation ul li:hover
{
 padding-left:35px;
 background-image:url("../img/navpoint.gif");
 background-repeat:no-repeat;
}

#navigation ul li a
{
 color:#000;
 font-weight:bold;
 text-decoration:none;
}

[afra]

Hallo Saltamontes

<ul id="navigation">
  <li><a href="index.php">Punk 1</a></li>
  <li><a href="index.php">Punk 1</a></li>
  <li><a href="index.php">Punk 1</a></li>
</ul>

Die geschachtelte Division ist _völlig_ unnötig.

#navigation
{
position:absolute;
top:0px; left:0px;
width:168px;
margin:15px 0px 0px 15px;
z-index:10;
}

#navigation li
{
list-style:none;
height:25px;
margin:5px 0px;
padding:5px 0px 5px 35px;
}

#navigation li:hover
{
padding-left:35px;
background-image:url("../img/navpoint.gif");
background-repeat:no-repeat;
}

#navigation li a
{
color:#000;
font-weight:bold;
text-decoration:none;
}

Nach Korrektur und Anpassung ist auch Dein CSS kompackter. Wieso zementierst Du die Höhe Deines LI und verwendest kein min-height?

Der IE unterstützt die Pseudoklasse hover bis zur Version 6 nur für Anker. Ansätze dazu hast du von den anderen Antworten schon bekommen.

Schönen Gruß

Afra

[Saltamontes]

Hallo!

Erstmal allen die gepostet haben vielen Danke für eure Hilfe!

Die geschachtelte Division ist _völlig_ unnötig.

Das Div brauch ich noch für ein paar andere Elemente die ich anhand des Divs ausrichte. Darum die Lösung über die Folgeelemente der DIV-ID. Oder wäre es sinnvoller der Liste eine eigene ID zu geben?

Der IE unterstützt die Pseudoklasse hover bis zur Version 6 nur für Anker. Ansätze dazu hast du von den anderen Antworten schon bekommen.

Das mit den Ankern hat letztendlich geklappt. Hatte erst das Problem, dass bei Ankern der Hintergrund nicht komplett angezeigt wird, hatte aber display:bock vergessen :)

Also nochmal Danke!

Saltamontes

[Patrick Andrieu]

Hallo Saltamontes!

Das mit den Ankern hat letztendlich geklappt. Hatte erst das Problem, dass bei Ankern der Hintergrund nicht komplett angezeigt wird,
hatte aber display:bock vergessen :)

^

Und was kam dabei als Hintergrund raus? Ziegenbock?

*SCNR*

Viele Grüße aus Frankfurt/Main,
Patrick

[Olaf Schneider]

Hallo Saltamontes,

wie Zeromancer in seinem Beispiel gezeigt hast, kannst Du statt li:hover a:hover verwenden. Das versteht auch der IE. li:hover allerdings ist dem IE nur mit komischen Tricks beizubiegen.

Gruß
Olaf

[Olaf Schneider]

Hallo Saltamontes,

was funktioniert denn nicht und wie sieht der relevante Teil Deines Codes aus?

Gruß
Olaf