Lingi olekud CSS-is

Ma arvan, et te, külastades erinevaid veebisaite internetis, olete märganud, et lingid reageerivad tavaliselt hiirekursori pealeviimisele. Sellist efekti saavutada, määrates linkide käitumist erinevates olekutes.

Näiteks nii - a:hover - me püüame kinni oleku, kui lingile on viidud hiirekursori. Sel hetkel saame näiteks muuta lingi värvi või eemaldada/lisada sellele allajoonimise. Konstruktsiooni :hover nimetatakse pseudoklassiks. Pseudoklassid võimaldavad püüda kinni erinevaid elementide olekuid.

Peale :hover on veel pseudoklassid :link, mis püüavad kinni külastamata lingi, ja :visited, mis püüavad kinni külastatud lingi. Mõnedel veebisaitidel kasutatakse neid kasutajatele näitamiseks, kus nad on käinud ja kus mitte. On ka pseudoklass :active, mis püüab kinni järgmise oleku: elemendile vajutati hiirega, kuid seda veel vabastati.

Järgmises näites lingi olekus :hover eemaldatakse allajoonimine, olekus :link määratakse punane värv, olekus :visited - roheline, ja :active - helesinine. Tulemuseks saab, et alguses on link punase värviga, pärast sellele vajutamist - rohelise, kui vajutada sellele hiirega ja mitte lahti lasta - helesinine, ja kui viia hiirekursori peale - muutub allajoonimata:

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

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

Результат: