CSS :hover pseudo-class

Definition and usage

CSS :hover Pseudo-classes are used to select elements when the mouse hovers over them.

Tip::hover Pseudo-classes can be used for all elements, not just links.

Tip:Please use :link Set the style of the unvisited page link, using :visited Set the style of the link to the visited page, using :active Set the style of the active link.

Note:In CSS definitions,:hover must be placed in :link and :visited!(if it exists) before it takes effect!

Instance

Example 1

Select and set the style of the link when the mouse hovers over it:

a:hover {
  achtergrondkleur: geel;
  font-size: 18px;
}

Probeer het zelf uit

Example 2

Select and set the style of <p>, <h1>, and <a> elements when the mouse hovers over them:

p:hover, h1:hover, a:hover {}}
  achtergrondkleur: geel;
}

Probeer het zelf uit

Voorbeeld 3

Kies en stel de stijlen in voor onbezoekte, bezochte, hover en actieve koppelingen:

/* Onbezoekte koppeling */
a:koppeling {
  kleur: groen;
}
/* Bezochte koppeling */
a:bezoekt {
  kleur: groen;
}
/* Koppeling bij muisoverzetten */
a:hover {
  kleur: rood;
}
/* Actieve koppeling */
a:active {
  kleur: geel;
}

Probeer het zelf uit

Voorbeeld 4

Stel verschillende stijlen in voor koppelingen:

a.ex1:hover, a.ex1:active {
  kleur: rood;
}
a.ex2:hover, a.ex2:active {
  lettergrootte: 150%;
}

Probeer het zelf uit

Voorbeeld 5

Houd over het <span>-element om het <div>-element te tonen (bijvoorbeeld een tooltip):

div {
  weergave: niet zichtbaar;
}
span:hover + div {
  weergave: blok;
}

Probeer het zelf uit

Voorbeeld 6

Toon en verberg de 'dief' menu bij muisoverzetten:

ul {
  weergave: inline;
  marge: 0;
  opvulling: 0;
}
ul li {weergave: inline-blok;}
ul li:hover {achtergrond: #555;}
ul li:hover ul {weergave: blok;}
ul li ul {
  positie: absoluut;
  breedte: 200px;
  weergave: niet zichtbaar;
}
ul li ul li {
  achtergrond: #555;
  weergave: blok;
}
ul li ul li a {weergave: blok !important;}
ul li ul li:hover {achtergrond: #666;}

Probeer het zelf uit

CSS-syntaxis

:hover {
  css-declaraties;
}

Technische details

Browserondersteuning

De cijfers in de tabel geven de eerste browserversie aan die deze pseudoklasse volledig ondersteunt.

Gerelateerde pagina's

Handleiding:CSS-koppelingen

Handleiding:CSS-pseudoklassen