Pytanie 1
W języku CSS, sformatowanie dowolnego elementu języka HTML w ten sposób, że po najechaniu na niego kursorem zmienia on kolor czcionki, wymaga zastosowania pseudoklasy
A. :visited
B. :hover
C. :active
D. :coursor
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.
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.
