Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA INF3 - CZERWIEC 2015



PYTANIE NR 5.
W zamieszczonym przykładzie pseudoklasa hover sprawi, że styl pogrubiony będzie przypisany
Ilustracja przedstawia fragment kodu CSS, który jest używany w kontekście programowania stron internetowych.
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Pseudoklasa :hover działa tylko wtedy, gdy użytkownik najeżdża kursorem na dany element. Jeśli selektor dotyczy odnośnika (np. <a>), pogrubienie zostanie zastosowane wyłącznie w chwili wskazania go myszą, a nie dla wszystkich linków stale ani ze względu na stan odwiedzenia.

Pełne wyjaśnienie:

Pseudoklasa :hover w CSS opisuje stan interakcji elementu, w którym wskaźnik (najczęściej kursor myszy) znajduje się nad tym elementem. Oznacza to, że reguła stylu z :hover nie działa "zawsze", tylko warunkowo i chwilowo – dokładnie w czasie najechania.

Jeżeli w przykładzie selektor został zbudowany dla odnośnika (np. elementu <a> lub klasy przypisanej linkom), to pogrubienie czcionki (np. przez font-weight: bold) będzie przypisane temu konkretnemu odnośnikowi, na który w danym momencie najechano kursorem. Po zjechaniu kursorem efekt znika, bo element przestaje spełniać warunek :hover.

Dlaczego pozostałe odpowiedzi są błędne?

  • Stwierdzenie o "wszystkich odnośnikach nieodwiedzonych" opisuje stan :link (link nieodwiedzony), a nie stan najechania. To inna pseudoklasa i inne kryterium.
  • Stwierdzenie o "każdym odnośniku niezależnie od aktualnego stanu" ignoruje fakt, że :hover jest zależne od zdarzenia/akcji użytkownika. Nie jest to selektor stały, tylko selektor stanu.
  • Stwierdzenie o "wszystkich odnośnikach odwiedzonych" odnosi się do :visited, czyli historii przeglądania, a nie do interakcji kursorem.

Wskazówka egzaminacyjna: zapamiętaj, że zestaw stanów linków często występuje razem (link/visited/hover/active). Każdy z nich testuje inne kryterium: historia, najechanie, kliknięcie. W pytaniach szukaj słów typu "najechanie kursorem" – to niemal zawsze prowadzi do :hover.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co to jest pseudoklasa :hover w CSS?
:hover to pseudoklasa CSS, która wybiera element tylko wtedy, gdy użytkownik wskaże go kursorem (np. myszą). Styl zdefiniowany dla :hover działa chwilowo podczas najechania i zwykle służy do podkreślenia interaktywności (np. linków i przycisków).
Jak działa pogrubienie linku po najechaniu kursorem?
Najczęściej ustawia się to regułą typu a:hover { font-weight: bold; }. Gdy kursor znajdzie się nad danym odnośnikiem, przeglądarka stosuje pogrubienie tylko do tego jednego elementu. Po zjechaniu kursorem wraca styl domyślny lub wynikający z innych reguł.
Dlaczego :hover nie dotyczy wszystkich odnośników naraz?
Ponieważ :hover opisuje stan konkretnego elementu w danej chwili. W tym samym momencie użytkownik zwykle "hoveruje" tylko jeden element (ten pod kursorem). Pozostałe linki nie spełniają warunku, więc nie dostają stylu z :hover.
Jaka jest różnica między :hover a :visited?
:hover zależy od aktualnej interakcji (najechania kursorem). :visited zależy od historii przeglądania i dotyczy linków, które były już odwiedzone. To dwa różne kryteria, więc prowadzą do innych efektów wizualnych i są używane w innych sytuacjach.
Co oznacza :link w stylowaniu odnośników?
:link wybiera odnośniki, które są nieodwiedzone (przeglądarka nie ma ich w historii jako odwiedzonych). Nie ma to związku z najechaniem kursorem. Często łączy się to z :visited i :hover, aby nadać różne style dla stanów linku.
Kiedy stosuje się :hover w projektowaniu stron?
Stosuje się go, gdy chcesz dać użytkownikowi informację zwrotną, że element jest interaktywny: link, przycisk, pozycja menu. Typowe efekty to zmiana koloru, podkreślenie, pogrubienie, zmiana tła. Trzeba pamiętać o użytkownikach dotykowych, gdzie "hover" bywa ograniczony.
Czy :hover działa na ekranach dotykowych?
Często działa inaczej niż na komputerze. Na urządzeniach dotykowych nie ma klasycznego kursora, więc przeglądarka może symulować stan :hover przy pierwszym dotknięciu albo w ogóle go pomijać. Dlatego ważne jest, by kluczowe funkcje nie zależały wyłącznie od efektu hover.
Jakie błędy najczęściej popełnia się przy :hover na egzaminie?
Najczęstsze błędy to mylenie :hover z :visited lub :link oraz ignorowanie, że styl działa tylko w momencie najechania. Inny błąd to przekonanie, że reguła obejmie wszystkie linki jednocześnie, zamiast tylko ten wskazany.
Jak poprawnie ustawić kolejność stylów linków (link/visited/hover/active)?
W praktyce często stosuje się kolejność LVHA: :link, :visited, :hover, :active. Dzięki temu późniejsze reguły nie są przypadkowo nadpisywane przez wcześniejsze. To pomaga uzyskać przewidywalne style w różnych stanach odnośnika.
Jak sprawdzić w DevTools, czy działa :hover dla linku?
W narzędziach deweloperskich przeglądarki możesz zaznaczyć element i wymusić stan (np. ":hov" / force state) lub po prostu najechać kursorem, obserwując zmiany w panelu "Styles". To ułatwia wykrycie nadpisywania reguł i sprawdzenie, która deklaracja ustawia pogrubienie.
info

Statystycznie 55% uczniów zna prawidłową odpowiedź. średnie

Specjaliści zwracają uwagę: "Pseudoklasa :hover działa tylko wtedy, gdy użytkownik najeżdża kursorem na dany element."

Źródła:

  • MDN Web Docs: ":hover" (CSS) – https://developer.mozilla.org/en-US/docs/Web/CSS/:hover (dostęp: 2026-02-28)
  • MDN Web Docs: "Pseudo-classes" – https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes (dostęp: 2026-02-28)
  • W3C: Selectors Level 3 – sekcja "The user action pseudo-classes :hover, :active, and :focus" – https://www.w3.org/TR/selectors-3/ (dostęp: 2026-02-28)

Materiały:

  • Dokumentacja MDN: CSS Pseudo-classes oraz :hover
  • Specyfikacja selektorów CSS (Selectors Level 3/4) – rozdział o pseudoklasach
  • Ćwiczenia praktyczne: stylowanie stanów linków (link/visited/hover/active) w prostym HTML
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego