Przykład
Wybierz i styl link po najechaniu kursorem myszy nad nim:
a:hover
{
background-color: yellow;
}
Spróbuj sam " Więcej "Try it Yourself" przykłady poniżej.
Definicja i Wykorzystanie
Opcja: selektor unosić służy do wybierania elementów podczas myszy nad nimi.
Tip: Opcja: selektor unosić może być stosowany na wszystkich elementach, nie tylko na linki.
Tip: Użyj : Link wybieraka do łączy styl do nieodwiedzonych stron, w : visited wybieraka łączy styl do odwiedzanych stron, a : active wybieraka styl aktywnego linku.
Note: : hover musi pochodzić po: link i: visited (if they are present) w definicji CSS, aby mogły być skuteczne!
| Wersja: | CSS1 |
|---|
Pomoc Browser
Liczby w tabeli określa pierwszą wersję przeglądarki, która w pełni obsługuje wybierak.
| Selektor | |||||
|---|---|---|---|---|---|
| :hover | 4,0 | 7,0 | 2,0 | 3,1 | 9,6 |
Note: W IE musi być ogłoszony <! DOCTYPE> dla: selektor najechania pracować na innych elementach niż <a> elementu.
Składnia CSS
Więcej przykładów
Przykład
Wybierz i styl a <p>, <h1> i <a> elementem podczas myszy nad nim:
p:hover, h1:hover, a:hover {
background-color: yellow;
} Spróbuj sam " Przykład
Wybierz i styl nieodwiedzonych odwiedził, unoszą się i aktywne linki:
/* 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;
}
Spróbuj sam " Przykład
linki stylów z różnych stylów:
a.ex1:hover, a.ex1:active {
color: red;
}
a.ex2:hover, a.ex2:active {
font-size: 150%;
}
Spróbuj sam " Przykład
Najedź kursorem na <span> elementu do wyświetlania <div> elementu (like a tooltip) :
div {
display: none;
}
span:hover + div {
display: block;
}
Spróbuj sam " Przykład
Pokazać i ukryć "dropdown" menu 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;}
Spróbuj sam " Podobne strony
Kurs CSS: CSS Linki
Kurs CSS: Klasy CSS Pseudo