Hallo,
ich habe eine ganz normale Tabelle (<table><tr class="test"><td>....).
Das tr-Tag ordnete ich einer CSS-Klasse zu. Die Klasse hat folgende Eigenschaft:

.test:hover
{
background-color: #FF0000;
}

Der Hover-Effekt geht mit den meisten gängigen Browsern (Firefox, IE, Chrome) flüssig von statten - aber nur bis zu einer gewissen Größe!
Wenn die Tabelle nämlich statt 100 Zeilen z.B. 600 Zeilen lang ist, und wenn ich anschließend mit dem Mauszeiger schnelle Bewegungen mache, dann ruckelt der Hover Effekt im Internet Explorer 8 (obwohl in meinem PC ein Athlon 64 X2 6000 verbaut ist). Im Firefox läuft der Hover-Effekt noch flüssig!

Wie ist das möglich?

Kann ich den Hover-Effekt auch mit einem anderen CSS-Code realisieren, sodass bei größeren Tabellen der Internet Explorer keine Probleme bekommt?

Wer hat Erfahrungen?

Vielen Dank schon einmal für eure Bemühungen!

Deine Beschreibung lässt aus, ob du jeder tr in dieser Tabelle diese Klasse zugeordnet hast. Wenn ja, könntest du der table eine id geben und die Klassen weglassen. Der Selektor wäre dann
Da wir hier mangels Testcase raten müssen: vemutlich hilft das nichts, und der User hat sich an eine langsame Anwendung eh meist schneller gewöhnt als der Entwickler.

__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken

Ja, es wurde jedem tr-Tag eine Klasse zugewiesen. Hintergrund ist der, dass die ersten beiden Zeilen der Tabelle keinen Hover-Effekt haben dürfen.

Ist es möglich, deine Variante anzuwenden, und gleichzeitig zu sagen: "auf den ersten zwei Zeilen darf dieser Code NICHT zutreffen". Geht sowas?

An dieser Stelle habe ich noch eine weitere Frage:
Ich möchte jede Spalte eine gewisse Breite zuordnen. Muss ich diese CSS-Formatierung (Breite) in jeder Zeile machen, oder reicht die Formatierung der ersten Zeile?

Ja, das geht. Die einfachste Lösung: Setz den Hovereffekt der ersten beiden Zeilen (per Klasse) auf das Standardaussehen. Dann gibt es zwar einen Effekt, aber der ist nicht sichtbar.
So etwas würde ich lassen, das macht nur Probleme. Die Zellen sind ja sowieso immer gleich lang (pro Spalte). Die Formatierungsangabe in der CSS geben absolute Werte an, die - anch Möglichkeit - immer eingehalten werden. Die Angaben im HTML geben relative Werte an. Es sind also Verschiebungen möglich.

__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!

Das funktioniert leider nicht. Die Formatierung der gesamten Tabelle (#tabid tr:hover {}) hat anscheinend eine höhere Priorität als die Klasse, die der ersten beiden Zeilen zugeordnet wurden.

Ja, wegen der unterschiedlichen Spezifität von Klassen und IDs.

Wenn du in dem von dir genannten Selektor die Klasse hinzufügst, funktioniert Praktikants Vorschlag.

__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.

Wenn die Tabelle eine ID und die ersten beiden Zeilen eine Klasse zugeordnet werden, dann funktioniert es definitiv nicht.

Wie war dein Beitrag nun gemeint? Die ID ebenfalls als Klasse umwandeln?

Doch, das funktioniert. Du musst nur die Selektoren ändern, die die ersten beiden Zeilen ansprechen.

Da du deinen Versuch nicht mit Quelltext belegst, muss ich vermuten:

Die ersten beiden Zeilen deiner Tabelle besitzen eine Klasse, sagen wir ".spezielle-zeile". Du versuchst vermutlich diese mit dem Selektor ".spezielle-zeile:hover {}" anzusprechen. Da dieser Selektor die Spezifität 0 2 0 besitzt, wird er von dem Selektor "#tabid tr:hover {}" überschrieben, denn der besitzt die Spezifität 1 1 1.

Theoretisch soltlest du mit dieser Information (und dem verlinkten Artikel) in der Lage sein, das Problem zu lösen. Bemühe dich bitte, die Regeln der Spezifität zu verinnerlichen, dann kannst du Probleme wie dieses in Zukunft vermeiden.

Du musst die Spezifität des Selektors ".spezielle-zeile" erhöhen: "#tabid .spezielle-zeile" (Spezifität 1 2 0).

__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.

Mich würde eigentlich interessieren, ob der in meinem Beitrag vorgeschlagene Verzicht auf eine Klasse im Selektor ( und auch der Verzicht auf all die Klassen an den tr) etwas an der Performance im IE8 ändert.

__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken

@gato: jetzt funktioniert es! Die Spezifitäten kannte ich bisher noch nicht. Danke!

@IChao: am IE konnte ich noch keine Tests fahren, da meine Entwicklungsumgebung auf Linux läuft. Sobald ich es getestet habe, werde ich dich davon unterrichten.