CSS saišu stāvokļi

Es domāju, ka jūs, apmeklējot dažādas vietnes internetā, esat ievērojuši, ka saites parasti reaģē uz peles kursora novadīšanu uz tām. Šādu efektu var panākt, nosakot saites uzvedību dažādos stāvokļos.

Piemēram, šādi - a:hover - mēs noķersim stāvokli, kad uz saites ir novadīts peles kursors. Šajā brīdī mēs varam, piemēram, mainīt saites krāsu vai noņemt/pievienot tai pasvītrojumu. Konstrukcija :hover tiek saukta par pseidoklasu. Pseidoklases ļauj noķert dažādus elementu stāvokļus.

Bez :hover ir vēl pseidoklases :link, kas noķer neapmeklēto saiti, un :visited, kas noķer apmeklēto saiti. Dažās vietnēs ar to palīdzību tiek rādīts lietotājiem, kur viņi ir bijuši, bet kur - ne. Ir arī pseidoklase :active, kas noķer nākamo stāvokli: uz elementa ir noklikšķināts ar peli, bet vēl nav atlaists.

Nākamajā piemērā saitē stāvoklī :hover tiek noņemts pasvītrojums, stāvoklī :link tiek iestatīta sarkana krāsa, stāvoklī :visited - zaļa, :active - gaiši zila. Rezultātā izrādīsies, ka sākumā saite būs sarkanā krāsā, pēc noklikšķināšanas uz tās - zaļā, ja noklikšķināt uz tās ar peli un neatlaist - gaiši zilā, bet ja novadīt peles kursoru - kļūs nepasvītrota:

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

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