W CSS do reagowania na najechanie kursorem myszy służy pseudoklasa :hover. Gdy użytkownik przesuwa kursor nad element (tu: wiersz tabeli tr), selektor tr:hover zaczyna pasować, a przeglądarka stosuje zadeklarowane style.
Żeby wiersz "zmieniał kolor tła na szary", należy modyfikować właściwość background-color, ponieważ odpowiada ona za wypełnienie tła elementu. Właściwość color zmienia wyłącznie kolor tekstu, więc nie spełnia warunku o tle.
Dlatego poprawny zapis to:
tr:hover { background-color: gray;
}Dlaczego pozostałe propozycje nie pasują?
- Warianty z :active odnoszą się do stanu aktywacji (zwykle podczas kliknięcia/przytrzymania), a nie samego najechania kursorem, więc efekt nie będzie zgodny z poleceniem.
- Warianty z color: gray zmieniają barwę tekstu w wierszu, a nie tło, więc wizualnie "podświetlenie wiersza" nie nastąpi tak, jak oczekiwano.
W praktyce podświetlanie wierszy tabel poprawia czytelność interfejsu (np. listy rekordów w panelu admina). Warto też pamiętać, że czasem dla pełnego efektu stosuje się podobne reguły dla komórek (td, th), zależnie od modelu renderowania tabeli w przeglądarce.
