Poprawna odpowiedź to pseudoklasa :hover. W CSS służy ona dokładnie do tego, o co chodzi w pytaniu: do zmiany wyglądu elementu w momencie, gdy użytkownik najedzie na niego kursorem myszy (albo innym wskaźnikiem). Mechanizm jest prosty: przeglądarka śledzi pozycję kursora i kiedy znajduje się on nad danym elementem, do selektora z :hover zostają zastosowane zdefiniowane tam style. Przykładowo, żeby po najechaniu zmienić kolor tekstu linku, wystarczy napisać: a:hover { color: red; } Można tak samo stylować dowolny element HTML, nie tylko <a>: button:hover { color: white; background-color: #007bff; cursor: pointer; } W nowoczesnych interfejsach :hover jest podstawą efektów „podświetlenia” przycisków, kart, menu rozwijanych itp. Z mojego doświadczenia warto pamiętać o kolejności pseudoklas dla linków: a:link, a:visited, a:hover, a:active – to jest klasyczna dobra praktyka (czasem zapisywana jako LVHA), żeby style się nie nadpisywały w dziwny sposób. Trzeba też mieć w głowie, że na urządzeniach mobilnych :hover działa inaczej lub wcale, bo tam nie ma typowego kursora. Dlatego sensowne jest, żeby najważniejsze informacje nie były dostępne tylko po najechaniu, a :hover traktować bardziej jako poprawę wygody i estetyki, a nie jedyne źródło funkcjonalności. Mimo to w klasycznym desktopowym webie :hover jest absolutnym standardem do reakcji na najechanie kursorem.
W tym zadaniu kluczowe jest zrozumienie, co dokładnie oznaczają poszczególne pseudoklasy CSS i w jakim momencie są aktywowane przez przeglądarkę. Pytanie dotyczy sytuacji, gdy element ma zmienić kolor czcionki po najechaniu na niego kursorem, czyli chodzi o reakcję na samo „zawieszenie” wskaźnika myszy nad elementem, bez klikania. Właśnie do tego została zaprojektowana pseudoklasa :hover i to ona jest poprawnym wyborem. Częsty błąd polega na myleniu :hover z :active. Pseudoklasa :active nie oznacza „aktywnego” w sensie podświetlonego czy zaznaczonego, tylko stan elementu w momencie aktywacji, najczęściej podczas klikania – dokładnie wtedy, gdy przycisk myszy jest wciśnięty. Typowy przykład to przyciski, które na czas kliknięcia lekko się „wciskają” wizualnie. Jeśli ktoś użyje :active do efektu po najechaniu, będzie zawiedziony, bo styl pojawi się tylko na ułamek sekundy w trakcie kliku, a nie podczas samego trzymania kursora nad elementem. Z kolei :visited jest ściśle powiązana z linkami i historią przeglądania. Ta pseudoklasa działa tylko dla odnośników z a[href] i tylko wtedy, gdy przeglądarka uzna, że dany adres został już wcześniej odwiedzony. Służy do odróżniania linków odwiedzonych od nieodwiedzonych, np. zmiana ich koloru. Nie ma ona żadnego związku z pozycją kursora. Dodatkowo, ze względów bezpieczeństwa i prywatności, możliwości stylowania :visited są w przeglądarkach celowo ograniczone. Odpowiedź :coursor jest po prostu nieprawidłowa składniowo – taka pseudoklasa w CSS nie istnieje. Prawdopodobnie jest to efekt skojarzenia z angielskim słowem „cursor”. W CSS za zmianę kształtu kursora odpowiada właściwość cursor (np. cursor: pointer;), ale to zupełnie inny mechanizm niż pseudoklasy. Można ją oczywiście łączyć z :hover, np. button:hover { cursor: pointer; }, ale sama nazwa :coursor jest błędna i nie zostanie zinterpretowana przez przeglądarkę. Typowy tok myślenia, który prowadzi do złej odpowiedzi, to właśnie intuicyjne zgadywanie po nazwie zamiast odwołania się do faktycznego działania według specyfikacji CSS. W praktyce warto zapamiętać proste skojarzenie: „hover” = „zawisnąć nad czymś”, czyli najechanie kursorem, „active” = moment kliknięcia, „visited” = stan linku po odwiedzeniu strony. Takie uporządkowanie znacznie ułatwia późniejsze projektowanie interfejsu zgodnie z dobrymi praktykami front-endowymi.