Firefox 5 und Pseudoklassen/hover-Effekte

[zettberlin]

Hallo Leute,

ich sehe gerade ein ziemlich hässliches Problem in Firefox5:

http://lapoc.de/archiv/schneider/wordpress/?page_id=2

Wenn die Maus auf einen Link oben zeigt, erscheint eine Schere darunter. Dummerweise verschwindet diese nicht, wenn der Cursor wieder aus dem Link herausgeht.

In FF3x und in allen anderen Browsern werden die Scheren brav ausgeblendet. Der Code sieht so aus:

  
  
	    #header ul li a:hover span.deko{  
	 display:block;  
	}  
	   #header ul li a span.deko{  
	 display:none;  
	}  

Nach meinem Verständnis, sollte display:none sofort eintreten, wenn a nicht mehr hover ist. Ein böser Bug im FF?

[T-Rex]

Hallo,

also so wie ich das sehe ist dein HMTL Code etwas unglücklich.
Ich würde das span erstmal ganz rausschmeissen (da du das nicht brauchst) und das img neben dem a Tag schreiben.
Also:
<a>
</a>
<img>

Bei einem Hover müssten du dann ... a:hover + img benutzten.

Gruß
T-Rex + T-Rex

[Gunnar Bittersmann]

@@T-Rex:

nuqneH

[…] und das img neben dem a Tag schreiben.

Nö, das img hat im Markup gar nichts zu suchen. Es ist Verzierung, das sollte also ein Hintergrundbild sein.

Qapla'

[T-Rex]

Oder so, dass ist natürlich noch besser!

Gruß
verbesserter
T-Rex

[zettberlin]

@@T-Rex:

nuqneH

[…] und das img neben dem a Tag schreiben.

Nö, das img hat im Markup gar nichts zu suchen. Es ist Verzierung, das sollte also ein Hintergrundbild sein.

Nein, das Bild sollte auch als Inhalt fungieren, es heißt erst mal nur "deko" -- wenn die Seite mal läuft, soll es eine Sammlung von Bildern zum Thema geben  etc.

Trotzdem danke ich Dir für den entscheidenden Hinweis! Das Problem scheint zu sein, dass der Style, der das Aussehen des sichtbaren Bilds bestimmt, im img-Tag steht. Wenn ich den gleichen Style stattdessen in den span packe, funktioniert alles, wie in den anderen Browsern auch und zwar egal, ob das Bild al Hintergrund oder direkt mit img eingebunden wird.

Qapla'

[zettberlin]

Hallo,

also so wie ich das sehe ist dein HMTL Code etwas unglücklich.
Ich würde das span erstmal ganz rausschmeissen (da du das nicht brauchst) und das img neben dem a Tag schreiben.
Also:
<a>
</a>
<img>

Danke, das funktioniert tatsächlich :-) cool

Hat aber einige Schönheitsfehler:

1.) Der span ist in anderen Fällen dazu da, auch Text anzuzeigen.
2.) Das, was ausklappt, soll auch gelinkt sein.

Bei einem Hover müssten du dann ... a:hover + img benutzten.

Gruß
T-Rex + T-Rex

Habs jetzt noch mal mit Chrome, Midori(Webkit) und Rekonq getestet und die Variante mit a:hover span.tipp geht in allen, wie es soll.

bis bald HZN