:hover
- Data publikacji
- Ostatnio edytowano
Przeznaczenie selektora :hover
:hover { ... }
Selektor :hover odwołuje się do każdego elementu HTML, którego cechy w danym momencie spełniają zasadę pseudoklasy :hover.
Cechy elementu HTML spełniają zasadę pseudoklasy :hover, gdy w danym momencie nad obszarem danego elementu HTML lub nad treścią znajdującą się w zawartości danego elementu HTML znajduje się kursor myszy.
Urządzenia mobilne (komórki, tablety itp.) mogą różnie interpretować selektor ":hover" lub też wcale (w zależności od typu urządzenia oraz przedmiotu, jakim użytkownik porusza się po ekranie danego urządzenia mobilnego).
Informacje techniczne o selektorze :hover
- ograniczenie - elementy HTML
-
brak
- ograniczenie - właściwości CSS
-
brak
Przykładowa reguła CSS, selektor :hover
p:hover {
color:red;
}Wyjaśnienie przykładowej reguły CSS
p:hover { color:red; }
p:hover-
do każdego elementu
p, którego cechy w danym momencie spełniają zasadę pseudoklasy:hover color-
dodaj właściwość CSS, która zmieni kolor tekstu elementu HTML
red-
na barwę czerwoną
Kod źródłowy przykładowego dokumentu HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
p {
border:3px solid black;
}
p:hover {
color:red;
}
</style>
</head>
<body>
<p>
w momencie gdy kursor myszy będzie znajdował się nad obszarem tego elementu "p" tekst znajdujący się w zawartości tego elementu "p" będzie posiadał kolor czerwony
</p>
<p>
w momencie gdy kursor myszy będzie znajdował się nad obszarem tego elementu "p" tekst znajdujący się w zawartości tego elementu "p" będzie posiadał kolor czerwony
</p>
<p>
w momencie gdy kursor myszy będzie znajdował się nad obszarem tego elementu "p" tekst znajdujący się w zawartości tego elementu "p" będzie posiadał kolor czerwony
</p>
</body>
</html>Rezultat
w momencie gdy kursor myszy będzie znajdował się nad obszarem tego elementu "p" tekst znajdujący się w zawartości tego elementu "p" będzie posiadał kolor czerwony
w momencie gdy kursor myszy będzie znajdował się nad obszarem tego elementu "p" tekst znajdujący się w zawartości tego elementu "p" będzie posiadał kolor czerwony
w momencie gdy kursor myszy będzie znajdował się nad obszarem tego elementu "p" tekst znajdujący się w zawartości tego elementu "p" będzie posiadał kolor czerwony
Interpretacja selektora :hover
-
tak
-
tak
-
tak
-
tak
-
tak
-
tak