✔ :hover funktioniert nicht

[Kopfballstar]

Hallo,

über CSS und :hover möchte ich das ein Image ausgetauscht wird. Aber irgendwie klappt es nicht. Seht ihr einen Fehler?

<a id="video1"></a>

#video1	{background-image:url(../images/video1.jpg); width:122px; height:130px;}	
#video1:hover {background-image:url(../images/video1_pressed.jpg); width:122px; height:130px;}

 

[Maik]

Probier es mal so:

a#video1:link, a#video1:visited {
background-image:url(../images/video1.jpg); 
width:122px; 
height:130px;
display:block;
}
	
a#video1:hover {
background-image:url(../images/video1_pressed.jpg); 
}

Siehe hierzu auch deinen vier Tage alten Thread <img> in <a> austauschen per css?.

 

[Kopfballstar]

Probier es mal so:

a#video1:link, a#video1:visited {
background-image:url(../images/video1.jpg); 
width:122px; 
height:130px;
display:block;
}
	
a#video1:hover {
background-image:url(../images/video1_pressed.jpg); 
}

Siehe hierzu auch deinen vier Tage alten Thread <img> in <a> austauschen per css?.

Ah, es funktioniert. LAg allerdings an einem fehlenden href im a Tag.
Thx.

 

[Kopfballstar]

Neu:

Ja im IE funktioniert es ja so, aber im Firefox nicht.

 

[Maik]

Bei mir greifen die CSS-Regeln im Firefox (1.5.0.3) einwandfrei.

Und was funktioniert bei dir im Firefox nicht?

Gibt es eventuell eine Online-Version der Testseite, um das vermeintliche Problem betrachten zu können?

 

[Kopfballstar]

Alle, über CSS eingebundenen, Grafiken werden nicht angezeigt. Im IE schon.

 

[Maik]

Der vollständige Quelltext (HTML + CSS) wäre bei der Fehlersuche von Vorteil, denn hellsehen können wir nicht.

 

[Kopfballstar]

  <div id="buttons" style=" z-index:3;"> 
    <div id="button_scroll_up" style="z-index:5;"> <a id="up" href="#" onmouseover="scrollitdown()" onmouseout="clearTimeout(timer)"></a> 
    </div>
    <div id="button_scroll_down" style="z-index:5;"> <a id="down" href="#" onmouseover="scrollitup()" onmouseout="clearTimeout(timer)"></a> 
    </div>
  </div>

und CSS

#down	{background-image:url(../buttons/down.jpg);width:31px; height:47px; background-repeat:no-repeat;}	
#down:hover{background-image:url(../buttons/down_pressed.jpg);width:31px; height:47px; background-repeat:no-repeat;}
#up{background-image:url(../buttons/up.jpg);width:31px; height:51px; background-repeat:no-repeat;}	
#up:hover	{background-image:url(../buttons/up_pressed.jpg);width:31px; height:51px; background-repeat:no-repeat;}

 

[Gumbo]

Wie ist denn das Stylesheet in das Dokument eingebunden?

 

[Maik]

Nun vergleich einfach deinen aktuellen CSS-Code mit meinem, den ich in meiner ersten Antwort gepostet habe. Es fehlt nämlich erneut (oder noch immer) die display:block-Eigenschaft, wie in deinem Eingangspost.