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>
: