W jaki sposób można w języku CSS ustawić takie stylizowanie tabeli, aby wiersz, na którym obecnie znajduje się kursor myszki, zmieniał kolor tła na szary?
Odpowiedź tr:hover { background-color: gray; } jest całkiem trafna. Używasz pseudoklasy :hover, co jest super standardowym podejściem do stylizacji elementów, gdy kursor najedzie na nie. W tabeli to tak działa, że cały wiersz zmienia kolor tła na szary, co znacznie poprawia czytelność i jakby cały interfejs staje się bardziej interaktywny. To jest przydatne w aplikacjach webowych, bo użytkownicy szybko rozumieją, na którym wierszu akurat są. Można jeszcze dodać inne efekty, na przykład zmienić kolor tekstu czy dodać jakies cień. Przykład to jakieś interaktywne tabele w systemach do zarządzania danymi, gdzie jak najeżdżasz na wiersze, to wyświetlają się dodatkowe info lub pozwalają je edytować. Pamiętaj też o dostępności – dobrze jest zadbać o kontrasty kolorystyczne, żeby osoby z dysfunkcjami wzroku mogły z tego korzystać.
Odpowiedzi tr:hover { color: gray; }, tr:active { color: gray; } i tr:active { background-color: gray; } są w tym kontekście niewłaściwe. W pierwszej odpowiedzi, jak używasz pseudoklasy :hover z właściwością color, zmieniasz tylko kolor tekstu, a nie tła, co nie spełnia wymogu modyfikacji koloru tła wiersza. Użytkownicy naprawdę oczekują, że jak najadą kursorem na wiersz, to zobaczą wyraźną zmianę w jego wyglądzie, a zmiana koloru tekstu to nie jest zbyt skuteczny sygnał wizualny. Druga i trzecia odpowiedź wykorzystują pseudoklasę :active, która działa tylko wtedy, gdy na element klikniemy. To pomija interakcję z myszką, co jest kluczowe w tym zadaniu. :active powinno być stosowane, gdy chcemy zmienić styl elementów podczas aktywacji, ale to nie działa w przypadku najechania kursorem. Użytkownicy mogą się mylić między tymi pseudoklasami, co prowadzi do kiepskiego projektowania interfejsu, który nie reaguje na intuicyjne działania, takie jak najeżdżanie myszą. W praktyce, dobrze jest używać właściwych pseudoklas, żeby osiągnąć zamierzony efekt i poprawić interaktywność aplikacji internetowych.