Exemplu
Selectați și stilul un link când mouse-ul peste ea:
a:hover
{
background-color: yellow;
}
Încearcă - l singur » Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.
Definiție și utilizare
The: Selectorul de trecere este folosit pentru a selecta elemente când mouse-ul peste ele.
Tip: The: Selectorul Hover poate fi folosit pe toate elementele, nu numai pe link - uri.
Tip: Utilizați : link - ul de selectare pentru link - uri către pagini de stil nevizitate, The : a vizitat selectorul pentru link - uri către pagini vizitate de stil, iar : activ selectorul pentru stilul link - ul activ.
Note: : Hover trebuie să vină după: link - ul și: a vizitat (if they are present) în (if they are present) în (if they are present) în definiția CSS, pentru a fi eficiente!
| Versiune: | CSS1 |
|---|
Suport pentru browser-
Numerele din tabel specifică prima versiune de browser care acceptă pe deplin selectorul.
| Selector | |||||
|---|---|---|---|---|---|
| :hover | 4 | 7 | 2.0 | 3.1 | 9.6 |
Note: În IE trebuie să fie declarat <DOCTYPE!> Pentru: selectorul Hover pentru a lucra pe alte elemente decât <a> elementul.
CSS Sintaxa
Mai multe exemple
Exemplu
Selectați și stilul unui <p>, <h1> și <a> elementul când mouse - ul peste ea:
p:hover, h1:hover, a:hover {
background-color: yellow;
} Încearcă - l singur » Exemplu
Selectați și stilul nevizitate, a vizitat, mutați, și link-uri active:
/* 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;
}
Încearcă - l singur » Exemplu
Link-uri Stil cu stiluri diferite:
a.ex1:hover, a.ex1:active {
color: red;
}
a.ex2:hover, a.ex2:active {
font-size: 150%;
}
Încearcă - l singur » Exemplu
Treceți cursorul peste un <span> elemente pentru a afișa un <div> Element (like a tooltip) :
div {
display: none;
}
span:hover + div {
display: block;
}
Încearcă - l singur » Exemplu
Arată și ascunde un "dropdown" meniu mutați mouse - ul:
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;}
Încearcă - l singur » Pagini similare
Tutorial CSS: CSS Legături
Tutorial CSS: clase CSS Pseudo