CSS :hover pseudo-klasser

Definition og brug

CSS :hover Pseudo-klasser bruges til at vælge elementer ved museoverførsel.

Tip::hover Pseudo-klasser kan bruges til alle elementer, og ikke kun links.

Tip:Brug :link Indstil stilen for ikke-besøgte sider ved hjælp af :visited Indstil stilen for besøgte sider ved hjælp af :active Indstil stilen for aktive links.

Bemærk:I CSS-definitioner,:hover må placeres :link og :visited(hvis tilgængelig) før de træder i kraft!

Eksempel

Eksempel 1

Vælg og indstil stilen for links ved museoverførsel:

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

Prøv det selv

Eksempel 2

Vælg og indstil stilen for <p>、<h1> og <a>-elementer ved museoverførsel:

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

Prøv det selv

Eksempel 3

Velg og sett stiler for ikke besøkte, besøkte, musepekeroverføring og aktive lenker:

/* Ikke besøkt lenke */
a:link {
  color: green;
}
/* Besøkt lenke */
a:visited {
  color: green;
}
/* Muspekeroverføring av lenke */
a:hover {
  color: red;
}
/* Aktiv lenke */
a:active {
  color: yellow;
}

Prøv det selv

Eksempel 4

Sett forskjellige stiler for lenker:

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

Prøv det selv

Eksempel 5

Hold musepekeren over <span>-elementet for å vise <div>-elementet (lignende en verktøylinje):

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

Prøv det selv

Eksempel 6

Vis og skjul 'nedtrekksmeny' ved musepekeroverføring:

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

Prøv det selv

CSS syntaks

:hover {
  css deklarationer;
}

Teknisk detalj

Nettleserstøtte

Tallene i tabellen angiver den første nettleserversjonen som fullt ut støtter denne pseudoklassen.

relaterede sider

Tilfølgelig:CSS links

Tilfølgelig:CSS pseudoklasser