JavaScript - Wie kann ich die Hintergrundfarbe aller TDs in einem TR gleichzeitig mit Mouseover / Mouseout ändern?

In CSS könnte man

oder nur

wenn die tds keine eigene Hintergrundfarbe haben.

Beide sollten die Zeile bei Mouseover schwarz und sonst weiß machen.

Sie können das natürlich auch in Javascript tun, aber das ist nicht notwendig (außer IE6, das die Pseudo-Klasse :hover in nichts außer <a> Tags versteht)

Dies ändert tatsächlich die Hintergrundfarbe des Elternteils tr , nicht jedes td , aber es könnte leicht geändert werden, um dies zu tun. Sie könnten die Ereignisse auch an die tr -Elemente anhängen, anstatt an die td -Elemente, und dann müssten Sie parentNode nicht verwenden, aber ich weiß nicht, ob Sie im Ereignishandler andere Dinge tun müssen speziell bezogen auf td .

Ich weiß nicht, was Ihr genauer Anwendungsfall ist, aber für solche Aufgaben würde ich nur bei CSS bleiben:

Ссылка

Dies ist schneller als die Verwendung von jQuery. Außerdem verwendet nicht jeder jQuery.

Dieses jsFiddle , das ich erstellt habe, zeigt Ihnen, wie Sie es mit jQuery machen.

Ich verwende jQuerys hover -Ereignis, um mit dem, was Sie versuchen, umzugehen.

Wenn Sie eine Framework-agnostische Lösung möchten, können Sie dies versuchen:

Beispiel: Ссылка

Eigentlich wäre es nicht einfacher, Ihren Hörer nur an die Elemente <tr> und nicht an die Elemente <td> zu binden. Gibt es einen Grund, warum Sie nur auf die <td> Elemente hören möchten?

$ (Selektor) .mouseenter (handlerIn) .mouseleave (handlerOut);

Sie können Code wie folgt verwenden:

HTML

Stilvorlage

JavaScript

Die .hover -Klasse kann natürlich wie gewünscht gestaltet werden.

Grüße und fröhliche Codierung!

In jQuery:

Oder in Javascript:

Wenn ich es in allen Java-Skripten gemacht habe, habe ich es so gemacht

Ich hoffe wirklich, dass das alles nicht verstümmelt