Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

Poprawny selektor to tr:hover { background-color: Pink; }, bo dokładnie opisuje sytuację pokazaną na filmie: efekt pojawia się dopiero po najechaniu kursorem na cały wiersz tabeli. Pseudo-klasa :hover w CSS służy właśnie do definiowania stylów w momencie, gdy użytkownik „najeżdża” myszką na dany element. Jeśli więc chcemy, żeby podświetlał się cały rząd tabeli, logiczne i zgodne z dobrymi praktykami jest przypięcie efektu do znacznika tr, a nie do pojedynczych komórek. W praktyce taki zapis stosuje się bardzo często w interfejsach webowych: w panelach administracyjnych, listach zamówień, tabelach z uczniami, produktami, logami systemowymi itd. Dzięki temu użytkownik łatwiej śledzi, który wiersz właśnie ogląda. To niby detal, ale z punktu widzenia UX robi sporą różnicę. Z mojego doświadczenia to jeden z tych prostych trików CSS, które od razu poprawiają „odczuwalną” jakość strony. Ważne jest też to, że :hover jest częścią standardu CSS (opisane m.in. w specyfikacji CSS Selectors Level 3/4) i działa w praktycznie wszystkich współczesnych przeglądarkach. Nie trzeba do tego żadnego JavaScriptu, żadnych skomplikowanych skryptów – czysty CSS. Dobrą praktyką jest również używanie bardziej stonowanych kolorów niż Pink w prawdziwych projektach, np. #f5f5f5 albo lekki odcień niebieskiego, tak żeby kontrast był czytelny i nie męczył wzroku. Warto też pamiętać, że podobny mechanizm możesz zastosować na innych elementach: np. a:hover dla linków, button:hover dla przycisków czy nawet div:hover dla całych kafelków w layoutach. Kluczowe jest to, żeby pseudo-klasa :hover była przypięta dokładnie do tego elementu, który ma reagować na interakcję użytkownika.