Jak zdefiniować w języku CSS takie formatowanie tabeli, żeby wiersz, na którym aktualnie znajduje się kursor myszy, zmieniał kolor tła na szary?
Odpowiedzi
Informacja zwrotna
Odpowiedź tr:hover { background-color: gray; } jest prawidłowa, ponieważ wykorzystuje pseudoklasę :hover, która jest standardowym sposobem na stylizację elementów w momencie, gdy najeżdża na nie kursor myszy. W przypadku tabeli, zastosowanie tej reguły na elemencie <tr> (wierszu tabeli) spowoduje, że cały wiersz zmieni kolor tła na szary, co poprawia czytelność i interaktywność interfejsu użytkownika. Tego typu stylizacje są szczególnie przydatne w aplikacjach webowych, gdzie użytkownik może szybko zidentyfikować, na którym wierszu aktualnie się znajduje. W praktyce, można również dodać inne efekty, np. zmianę koloru tekstu czy dodanie cieni, aby poprawić estetykę wizualną. Dobrym przykładem zastosowania tej techniki jest implementacja interaktywnych tabel w systemach zarządzania danymi, gdzie najeżdżanie na wiersze może ujawniać dodatkowe informacje lub umożliwiać ich edycję. Warto również pamiętać o dostępności, zapewniając odpowiednie kontrasty kolorystyczne, aby osoby z dysfunkcją wzroku mogły korzystać z tych funkcji.
Zarówno odpowiedzi tr:hover { color: gray; }, tr:active { color: gray; }, jak i tr:active { background-color: gray; } są nieprawidłowe w kontekście zdefiniowanego zadania. W pierwszym przypadku, gdy używamy pseudoklasy :hover z właściwością color, zmieniamy kolor tekstu, a nie tła, co nie spełnia wymogu modyfikacji koloru tła wiersza. Użytkownicy oczekują, że najeżdżając kursorem na wiersz tabeli, zauważą wyraźną zmianę w jego wyglądzie, a zmiana koloru tekstu nie jest wystarczająco efektywnym sygnałem wizualnym. Druga i trzecia odpowiedź używają pseudoklasy :active, która działa jedynie w momencie, gdy element jest aktywny, co oznacza, że zostało na niego kliknięte. To podejście całkowicie ignoruje interakcję z myszką, która jest kluczowa w zadanym kontekście. Pseudoklasa :active jest odpowiednia w sytuacjach, gdy chcemy stylizować elementy podczas ich aktywacji, ale nie jest to odpowiedni mechanizm do reakcji na najechanie kursorem. Użytkownicy mogą mylić te dwie pseudoklasy, co prowadzi do nieefektywnego projektowania interfejsu, który nie reaguje na intuicyjne działania, jak na przykład najeżdżanie myszą. W praktyce, warto zawsze stosować odpowiednie pseudoklasy, aby uzyskać pożądany efekt i poprawić interaktywność aplikacji internetowych.