CSS :Hover Selector
Voorbeeld
Selecteer en stijl een link wanneer u er met de muis overheen gaat:
a:hover
{
background-color: yellow;
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De :hover
selector wordt gebruikt om elementen te selecteren wanneer u er met de muis overheen gaat.
Tip: De :hover-selector kan op alle elementen worden gebruikt, niet alleen op links.
Tip: gebruik de :link selector om links naar niet-bezochte pagina's op te maken, de :visited selector om links naar bezochte pagina's te stylen en de :active selector om de actieve link een stijl te geven.
Opmerking: :hover MOET komen na :link en :visited (indien aanwezig) in de CSS-definitie, om effectief te zijn!
Versie: | CSS1 |
---|
Browserondersteuning
De cijfers in de tabel geven de eerste browserversie aan die de selector volledig ondersteunt.
Selector | |||||
---|---|---|---|---|---|
:hover | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
Opmerking: in IE moet een <!DOCTYPE> worden gedeclareerd om de :hover-selector te laten werken met andere elementen dan het <a>-element.
CSS-syntaxis
:hover {
css declarations;
}
Meer voorbeelden
Voorbeeld
Selecteer en style een <p>, <h1> en <a> element wanneer je er met de muis overheen gaat:
p:hover, h1:hover, a:hover {
background-color: yellow;
}
Voorbeeld
Selecteer en stijl niet-bezochte, bezochte, zwevende en actieve links:
/* 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;
}
Voorbeeld
Stijllinks met verschillende stijlen:
a.ex1:hover, a.ex1:active {
color: red;
}
a.ex2:hover, a.ex2:active {
font-size: 150%;
}
Voorbeeld
Plaats de muisaanwijzer op een <span>-element om een <div>-element weer te geven (zoals een tooltip):
div {
display: none;
}
span:hover + div {
display: block;
}
Voorbeeld
Toon en verberg een "dropdown"-menu bij muisaanwijzer:
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;}
Gerelateerde pagina's
CSS-zelfstudie: CSS-koppelingen
CSS-zelfstudie: CSS-pseudoklassen