li:hover { color: Maroon; } W kodzie CSS zastosowano formatowanie elementu listy, przy czym żadne inne formatowanie CSS nie zostało zdefiniowane....
li:hover { color: Maroon; }W kodzie CSS zastosowano formatowanie elementu listy, przy czym żadne inne formatowanie CSS nie zostało zdefiniowane. Zastosowane formatowanie sprawi, że
A. kolor Maroon będzie obejmował co drugi element listy.
B. tekst wszystkich elementów, którym przypisano id „hover”, będzie w kolorze Maroon.
C. tekst wszystkich elementów listy będzie w kolorze Maroon.
D. po najechaniu kursorem na element listy zmieni się kolor tekstu na Maroon.
Pytanie z egzaminu CKE, czerwiec 2020 (arkusz EE.09-SG-20.06).
Poprawna odpowiedź to: po najechaniu kursorem na element listy zmieni się kolor tekstu na Maroon. Selektor li:hover składa się z selektora elementu li oraz pseudoklasy :hover. Oznacza to, że reguła CSS zadziała tylko wtedy, gdy wskaźnik myszy znajduje się nad danym elementem listy. Właściwość color: Maroon; ustawia kolor tekstu, więc zmiana dotyczy treści elementu, a nie tła czy obramowania. Do zapamiętania: składnia element:pseudoklasa opisuje stan elementu, np. a:hover dla linku po najechaniu kursorem. W praktyce :hover często stosuje się do menu, przycisków i list nawigacyjnych. Typowa pułapka polega na myleniu :hover z identyfikatorem hover, który zapisywałoby się jako #hover.
W tym fragmencie najłatwiej pomylić pseudoklasę CSS z nazwą identyfikatora albo ze zwykłym selektorem elementu. Zapis li:hover nie oznacza tekstu wszystkich elementów, którym przypisano id „hover”. Identyfikator w CSS poprzedza się znakiem #, więc taki selektor miałby postać #hover, ewentualnie li#hover dla elementu li o takim identyfikatorze. Zapis nie oznacza też, że tekst wszystkich elementów listy będzie w kolorze Maroon przez cały czas. Do stałego sformatowania wszystkich elementów li wystarczyłby selektor li z regułą color: Maroon;. Nie chodzi również o kolor Maroon dla co drugiego elementu listy. Taki efekt uzyskuje się selektorami strukturalnymi, na przykład li:nth-child(2n) albo li:nth-child(even). Poprawne znaczenie tej reguły to: po najechaniu kursorem na element listy zmieni się kolor tekstu na Maroon. Typowy błąd myślowy polega na odczytywaniu hover jako nazwy elementu lub klasy, zamiast jako pseudoklasy opisującej stan elementu.