Linkkien tilat CSS:ssä

Luulen, että olette sivuillessanne eri verkkosivustoja huomanneet, että linkit yleensä reagoivat hiiren osoittimen vientiin niiden päälle. Tällaista efektiä voidaan saavuttaa asettamalla linkkien käyttäytymistä eri tiloissa.

Esimerkiksi näin - a:hover - me saamme kiinni tilan, jolloin linkille on tuotu hiiren osoitin. Tällä hetkellä voimme esimerkiksi vaihtaa linkin väriä tai poistaa/lisätä sille alleviivauksen. Rakenne :hover on nimeltään pseudoluokka. Pseudoluokat mahdollistavat eri elementtien tilojen sieppaamisen.

:hover:n lisäksi on olemassa pseudoluokkia :link, joka sieppaa vierailtavan linkin, ja :visited, joka sieppaa vierailun linkin. Joillain sivustoilla niiden avulla näytetään käyttäjille, missä he ovat käyneet, ja missä - eivät. On myös pseudoluokka :active, joka sieppaa seuraavan tilan: elementtiin on painettu hiirellä, mutta sitä ei ole vielä vapautettu.

Seuraavassa esimerkissä linkille tilassa :hover poistetaan alleviivaus, tilassa :link asetetaan punainen väri, tilassa :visited - vihreä, ja :active - sinivihreä. Tuloksena saadaan, että aluksi linkki on punaista väriä, sen painamisen jälkeen - vihreää, jos painaa sitä hiirellä eikä vapauta - sinivihreää, ja jos tuoda hiiren osoitin - siitä tulee ei-alleviivattu:

a:link {
	color: red;
}
a:visited {
	color: green;
}
a:hover {
	text-decoration: none;
}
a:active {
	color: blue;
}

<a href="#">link</a>