Sąsajų būsenos CSS

Manau, kad naršydami po įvairias interneto svetaines pastebėjote, kad sąsajos paprastai reaguoja į pelės užvedimą ant jų. Tokio efekto galima pasiekti, nustatant sąsajų elgesį įvairiose būsenose.

Pavyzdžiui, taip - a:hover - mes užfiksuosime būseną, kai sąsaja buvo užvesta pelės žymekliu. Tuo momentu galime, pavyzdžiui, pakeisti sąsajos spalvą arba pašalinti/pridėti jai pabraukimą. Konstrukcija :hover vadinama pseudoklasė. Pseudoklasės leidžia užfiksuoti skirtingas elementų būsenas.

Be :hover yra ir pseudoklasių :link, kurios fiksuoja nelankytą sąsają, ir :visited, kurios fiksuoja lankytą sąsają. Kai kuriose svetainėse su jų pagalba rodoma naudotojams, kur jie buvo, o kur - ne. Yra ir pseudoklasė :active, kuri fiksuoja tokią būseną: paspausta pelės mygtuką ant elemento, bet dar neatsileista.

Šiame pavyzdyje sąsajai būsenoje :hover pašalinamas pabraukimas, būsenoje :link nustatoma raudona spalva, būsenoje :visited - žalia, o :active - žydra. Rezultate bus taip, kad iš pradžių sąsaja bus raudonos spalvos, po paspaudimo ant jos - žalios, jei paspausti ant jos pelės mygtuku ir neatleisti - žydros, o jei užvesti pelės žymekliu - taps nepabraukta:

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

html<a href="#">sąsaja</a>

Результат: