Ako ste radili s CSS-om, onda znate da se stilovi primjenjuju na selektore koji, pak, sadrže HTML elemente. Ali ne uvijek. Postoji fantomska klasa klasa koja se pojavljuje samo u određenim stanjima objekta. Na primjer, pritisnut je gumb ili odabrano polje za unos. Za takve posebne slučajeve postoje CSS pseudo-klase: focus ,: hover,: active.

Dinamičke pseudo-klase

CSS definira tri dinamičke pseudo-klase: focus ,: hover,: active. Oni mijenjaju izgled objekta s određenim radnjama korisnika. To znači da je za njihov izgled nužan uvjet:

.tipka: lebdjeti {
border: 1px solid # 333;
}
.tipka: aktivna {
neprozirnost: .5;
}


U ovom primjeru, dok korisnik ne klikne na pokazivač miša na stavku s gumbom klase, unosi u stilu: hover se ne pojavljuju.

Pseudo-klasa se tradicionalno koristi za obradu veza i gumba. Ali raspon mogućnosti je mnogo širi. CSS: fokus se odnosi na objekt web stranice s fokusom na ulaz. Najčešće je to oblik registracije i pretraživanja.

input [type = "text"], input [type = "email"] {
širina: 300px;
Obitelj fontova: 'Gochi Hand', kurziv;
poravnavanje teksta: središte;
granica: 0;
pregled: nema;
}
input [type = "text"]: fokus, ulaz [type = "email"]: fokus {
border: 0;
}

: hover je odgovoran za elemente nad kojima se nalazi pokazivač miša ili drugi uređaj. Kada korisnik aktivira objekt na stranici, na primjer, klikne na vezu, pojavljuje se pseudo-klasa: aktivna

Mogućnosti korištenja pseudo-klasa

Stilovi: aktivni,: fokus,: hover - to je jedinstven način komuniciranja s korisnikom. Tako ćete dobiti upit gdje unositi podatke, označiti veze, označiti stavke koje možete kliknuti. Uz pomoć uspješnih efekata, motivirate posjetitelja da unese adresu e-pošte i pretplati se na vašu mailing listu. Zahvaljujući prekrasnom "Sign In!", "Read More!" Od onih koji su slučajno pogodili stranicu, bit će želja za daljnjim putovanjem na stranicu. Ali nemojte vrlo pažljivo koristiti pseudo-klase. Ako dodate: lebdeći gotovo sve elemente, posjetitelji vaše web-lokacije mogu pokrenuti morsku bolest od masivnog povećanja ili treperenja objekata. Primijenite fokus pseudo-klase CSS-a da biste promijenili boju granica polja, ne više. Najbolji način da ispravno odredite: lebdite je da boju fonta učinite tamnijom prilikom kursora mišem. Ali ne dodirujte veličinu - mogu utjecati na susjedne elemente.