CSS :hover pseudolaji

Määrittely ja käyttö

CSS :hover Pseudolajit käytetään elementtien valitsemiseen hiiren osoitettuna.

Vinkki::hover Pseudolajit voidaan käyttää kaikissa elementeissä, ei vain linkkeissä.

Vinkki:Käytä :link Aseta käymättömän sivun linkkien tyylit käyttämällä :visited Aseta käytetyn sivun linkkien tyylit käyttämällä :active Aseta aktiivisen linkin tyylit.

Huomioitavaa:CSS-määrittelyissä:hover on asetettava :link ja :visited(jos olemassa) ennen kuin ne tulevat voimaan!

Esimerkki

Esimerkki 1

Valitse ja aseta hiiren osoitettuna olevien linkkien tyylit:

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

Kokeile itse

Esimerkki 2

Valitse ja aseta hiiren osoitettuna olevien <p>、<h1> ja <a> -elementtien tyylit:

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

Kokeile itse

Esimerkki 3

Valitse ja aseta vierailemattomien, vieraillut, hiiren osoitin päällä olevien ja aktiivisten linkkien tyylit:

/* Vierailemattomat linkit */
a:link {
  color: green;
}
/* Vieraillut linkit */
a:visited {
  color: green;
}
/* Hiiren osoitin päällä olevat linkit */
a:hover {
  color: red;
}
/* Aktivoidut linkit */
a:active {
  color: yellow;
}

Kokeile itse

Esimerkki 4

Aseta linkkeille erilaisia tyylejä:

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

Kokeile itse

Esimerkki 5

Pysähdy <span>-elementin päällä näyttääksesi <div>-elementin (tyyliin työkaluvihje):

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

Kokeile itse

Esimerkki 6

Näytä ja piilota "pudotusvalikko" hiiren osoitin ollessa päällä:

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

Kokeile itse

CSS-grammatiikka

:hover {
  css-deklaratiot;
}

Tekninen yksityiskohta

Selaimen tuki

Taulukossa olevat numerot määrittelevät ensimmäisen selaimen version, joka täysin tukee kyseistä pseudolajia.

Liittyvät sivut

Opas:CSS-linkit

Opas:CSS-seudolajit