CSS : najedź na selektor
Przykład
Wybierz i nadaj styl linkowi, gdy najedziesz na niego myszą:
a:hover
{
background-color: yellow;
}
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Selektor :hover
służy do wybierania elementów po najechaniu na nie myszą.
Wskazówka: selektora :hover można używać na wszystkich elementach, nie tylko na linkach.
Wskazówka: Użyj selektora :link , aby nadać styl linkom do nieodwiedzonych stron, selektora :visited , aby nadać styl linkom do odwiedzanych stron, a selektora :active , aby nadać styl aktywnemu linkowi .
Uwaga: :hover MUSI występować po :link i :visited (jeśli są obecne) w definicji CSS, aby było skuteczne!
Wersja: | CSS1 |
---|
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje selektor.
Selector | |||||
---|---|---|---|---|---|
:hover | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
Uwaga: W IE musi być zadeklarowany <!DOCTYPE> , aby selektor :hover działał na innych elementach niż element <a>.
Składnia CSS
:hover {
css declarations;
}
Więcej przykładów
Przykład
Wybierz i nadaj styl elementowi <p>, <h1> i <a> po najechaniu na niego myszą:
p:hover, h1:hover, a:hover {
background-color: yellow;
}
Przykład
Wybierz i stylizuj linki nieodwiedzone, odwiedzone, najedź kursorem i aktywne:
/* unvisited link */
a:link {
color: green;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: red;
}
/* selected link */
a:active {
color: yellow;
}
Przykład
Style linki z różnymi stylami:
a.ex1:hover, a.ex1:active {
color: red;
}
a.ex2:hover, a.ex2:active {
font-size: 150%;
}
Przykład
Najedź kursorem na element <span>, aby wyświetlić element <div> (np. podpowiedź):
div {
display: none;
}
span:hover + div {
display: block;
}
Przykład
Pokaż i ukryj menu „rozwijane” po najechaniu myszą:
ul {
display: inline;
margin: 0;
padding: 0;
}
ul li {display: inline-block;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
position: absolute;
width: 200px;
display: none;
}
ul li ul li {
background: #555;
display: block;
}
ul li ul li a {display:block !important;}
ul li ul li:hover {background: #666;}
Powiązane strony
Samouczek CSS: Linki CSS
Samouczek CSS: CSS Pseudoklasy