Mouseover Button: Mauszeiger flimmert im IE

[Christoph]

Hallo,

ich habe einen Button erstellt, der per CSS das Hintergrundbild wechselt beim Hover.
Wenn ich die Seite im IE 6 anzeige und über meine Navigationsleiste mit der Maus fahre, flimmert der Mauszeiger kurz mit der Windows Sanduhr, als ob der Rechner arbeiten würde?
Ich habe es unter Windows XP und Windows NT 4 mit IE 6 probiert.
In der CSS Datei habe ich auch ein "cursor=hand;" hinzugefügt, der IE scheint da aber eine Sanduhr reinmachen zu wollen, wenn ich die Maus schnell über die Buttons bewege.
Wie bekomme ich das denn hin?

.button {
 background-image: url(./pics/buttonbg.jpg);
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-style: normal;
 height: 20px;
 width: 120px;
 text-decoration: none;
 center center;
 vertical-align: middle;
 display:block;
 margin-bottom:5px;
 width:16ex;
 padding:2px;
 border: 1px solid #FFFFFF;
 color: #000000;

}
a.button:hover   {
 background-image: url(./pics/buttonbgon.jpg);
 text-decoration: none;

}
a.button:active  {
 background-image: url(./pics/buttonbgon.jpg);
 text-decoration: none;

}

[Bastian Schnitzler]

In der CSS Datei habe ich auch ein "cursor=hand;" hinzugefügt, der IE scheint da aber eine Sanduhr reinmachen zu wollen, wenn ich die Maus schnell über die Buttons bewege.

du meinst wohl cursor: hand;

Tja, in der Tat musst der Browser das Bild erst laden.
Entweder du laedst das Bild schon vor, zb per JavaScript oder einem unsichtbaren div-Element, oder, was ich dir empfehlen wuerde, du baust deine Navi mit Flash, dann wir erstens alles komprimiert und zweitens laedt er erst die swf-Datei ganz, bevor er loslegt

Dein Bastian

[H2O]

Hallo.

du meinst wohl cursor: hand;

Du meinst wohl cursor: pointer;

Siehe SELFHTML:
http://de.selfhtml.org/css/eigenschaften/anzeigefenster.htm#cursor

Entweder du laedst das Bild schon vor, zb per JavaScript oder einem unsichtbaren div-Element, [...]

JS geht, aber bist du sicher, dass "<div style='display:none;'><img...></div>" geladen würde?
Denn wenn der Browser sieht, dass er das nicht anzeigen soll, warum soll er dann das Bild laden?
Besser und sicherer (vielleicht klappt es ja in manchen Browsern) wäre als Höhe und Breite 1px angeben, dann stände zwar auf der Seite irgendwo ein Pixelchen, aber damit lässt sich warscheinlich leben.

oder, was ich dir empfehlen wuerde, du baust deine Navi mit Flash, dann wir erstens alles komprimiert und zweitens laedt er erst die swf-Datei ganz, bevor er loslegt

Auch eine Möglichkeit.

Schönen Tag noch, H2O

[Viennamade]

Hallo!

Wenn ich die Seite im IE 6 anzeige und über meine Navigationsleiste mit der Maus fahre, flimmert der Mauszeiger kurz mit der Windows Sanduhr, als ob der Rechner arbeiten würde?

Wegen Deinem Posting habe ich eben http://www.fivesevensix.com/studies/ie6flicker/ gelesen, da gibts  Workarounds zu Deinem Problem. Bitte antworte was geholfen hat!

Beste Grüße
Viennamade

[Christoph]

Bei mir flackert nicht der Hintergrund, sondern der Mauszeiger zwischen Hand und Windows "in Arbeit"-sanduhr. Ich lade das Image pre mit Javascript, aber es flimmert.
Auch auf der obigen Website flimmert der Mauszeiger bei allen Images.
An was liegt denn das?

[Maxx]

Hallo Christoph,

ich habe einen Button erstellt, der per CSS das Hintergrundbild wechselt beim Hover.
Wenn ich die Seite im IE 6 anzeige und über meine Navigationsleiste mit der Maus fahre, flimmert der Mauszeiger kurz mit der Windows Sanduhr, als ob der Rechner arbeiten würde?

auch bekannt als der "Hover States Bug". Dein Rechner arbeitet tatsächlich. Das hover-image wird nicht aus dem cache geholt, sondern jedesmal neu übers Netz.

Wenn du nach Hover States Bug googelst solltest du Hinweise bekommen wie man das umgehen kann.
http://www.zeldman.com/daily/0203c.shtml

Grüße,

Jochen

[Christoph]

Irgendwie scheint keiner eine wirklich Lösung gefunden zu haben:

• versteckte divs und
• Javascript Preloads
  bringen nichts. :(