Selektory#
Pseudokalsa unoszenia wskaźnika#
:hover { /* deklaracje */ }Pseudoklasa :hover ma zastosowanie do elementu, nad który znajduje się urządzenie wskazujące, chociaż trzeba wyraźnie zaznaczyć, że aktywacja elementu nie jest konieczna. Dla przykładu, wizualna aplikacja kliencka może zastosować tę pseudoklasę w chwili, kiedy kursor (wskaźnik myszy) unosi się nad pojemnikiem generowanym dla tego elementu. Interaktywne aplikacje klienckie, które nie są w stanie wykryć unoszenia wskaźnika ze względu na ograniczenia sprzętowe (np. dla pióra świetlnego, które nie wykrywa unoszenia), dalej pozostają zgodne.
Trzeba być świadomym tego, że w przypadku języków znacznikowych zagnieżdżanie elementów jest czymś naturalnym. Wskazując element położony niżej w hierarchii drzewa węzłów, tak naprawdę wskazujemy jednocześnie wszystkich jego przodków, nawet jeśli wydaje nam się, że wskaźnik urządzenia nie znajduje się bezpośrednio nad nimi.
Języki gospodarza mogą definiować dla elementów dodatkowe wytyczne, na podstawie których zostaną one dopasowane do pseudoklasy unoszenia wskaźnika. Jednym z nich jest HTML5, gdzie kontrolka z przypisaną etykietą label i wybierana za pomocą pseudoklasy :hover pasuje także w sytuacji, kiedy sama etykieta kontrolki jest wskazywana.
Pseudoklasa :hover może mieć zastosowanie do dowolnych pseudoelementów.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
#p1:hover {background-color: green;}
#in:hover {background-color: red;}
div {margin: 20px 0px;}
#d1:hover {border: 10px solid black;}
#d2:hover {border: 10px solid blue;}
#d3:hover {border: 10px solid white;}
</style>
</head>
<body>
<p id="p1">Akapit po wskazaniu myszą powinien mieć niebieskie tło.</p>
<p>Wskaż myszą poniższą etykietę a kontrolka z prawej uzyska czerwone tło:</p>
<p><label for="in">Etykieta</label> <input id="in"></p>
<div id="d1">Pierwszy kontener DIV (po wskazaniu myszą uzyska czarne obramowanie).
<div id="d2">Drugi kontener DIV (po wskazaniu myszą uzyska niebieskie obramowanie).
<div id="d3">Trzeci kontener DIV (po wskazaniu myszą uzyska białe obramowanie).</div>
</div>
</div>
</body>
</html>Warto zwrócić uwagę na pozagnieżdżane elementy div. Wskazywanie najlepiej rozpocząć od najbardziej zewnętrznego kontenera, czyli elementu z identyfikatorem id="d1" i stopniowo schodzić niżej. Zatrzymując się na ostatnim elemencie powodujemy, że tak naprawdę wybrane zostają wszystkie. Styl obramowania nie jest dziedziczony, co dodatkowo ułatwia obserwowanie zmian.