CSS :hover pseudoklass

Definition och användning

CSS :hover Pseudoklasser används för att välja element när musen hålls över dem.

Tips::hover Pseudoklasser kan användas för alla element, inte bara länkar.

Tips:Använd :link Ställ in stilen för länkar till icke-besökta sidor, använd :visited Ställ in stilen för länkar till besökta sidor, använd :active Ställ in stilen för aktiva länkar.

Observera:I CSS-definitioner::hover måste placeras :link och :visited！(om det finns) innan det börjar gälla!

Exempel

Exempel 1

Välj och ställ in stilen för länkar när musen hålls över dem:

a:hover {
  background-color: yellow;
  font-size: 18px;
}

Prova själv

Exempel 2

Välj och ställ in stilen för <p>、<h1> och <a>-element när musen hålls över dem:

p:hover, h1:hover, a:hover {
  background-color: yellow;
}

Prova själv

Exempel 3

Välj och ställ in stilar för obesökta, besökta, muspekarens övergång och aktiva länkar:

/* Obesökt länk */
a:link {
  color: green;
}
/* Besökt länk */
a:visited {
  color: green;
}
/* Muspekarens övergång över länk */
a:hover {
  color: red;
}
/* Aktiv länk */
a:active {
  color: yellow;
}

Prova själv

Exempel 4

Ställ in olika stilar för länkar:

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

Prova själv

Exempel 5

Håll muspekaren över <span>-elementet för att visa <div>-elementet (likt en verktygsbeskrivning):

div {
  display: none;
}
span:hover + div {
  display: block;
}

Prova själv

Exempel 6

Visa och dölj "nedrullningsmeny" vid muspekarens övergång:

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;}

Prova själv

CSS-syntax

:hover {
  css-uttryck;
}

Tekniska detaljer

Webbläsarstöd

Numrerna i tabellen anger den första webbläsaren som fullständigt stöder denna pseudoklass.

Relaterade sidor

Tutorial:CSS-länkar

Tutorial:CSS-liknande