Če ste delali s CSS, potem veste, da se slogi uporabljajo za selektorje, ki vsebujejo elemente HTML. Ampak ne vedno. Obstaja fantomski razred razredov, ki se pojavlja samo v določenih stanjih objekta. Na primer, pritisnete gumb ali izbrano vnosno polje. Za take posebne primere obstajajo psevdo-razredi CSS: focus ,: hover,: active.

Dinamični psevdo-razredi

CSS definira tri dinamične psevdo-razrede: focus ,: hover,: active. Spreminjajo videz objekta z določenimi dejanji uporabnika. To pomeni, da je za njihov videz potreben pogoj:

. Gumb: hover {
obroba: 1px solid # 333;
}
. Gumb: aktivno {
motnost: .5;
}


V tem primeru, dokler uporabnik ne klikne miškin kazalec na element z gumbom razreda, se vnosi v slogu: hover ne prikažejo.

Psevdo-razredi se tradicionalno uporabljajo za upravljanje povezav in gumbov. Vendar je obseg možnosti veliko širši. CSS: fokus se nanaša na objekt spletne strani, ki je osredotočen na vhod. Najpogosteje je to oblika registracije in iskanja.

input [type = "text"], input [type = "email"] {
širina: 300px;
družina pisav: "Gochi Hand", pisava;
poravnava besedila: središče;
meja: 0;
oris: nič;
}
vhod [type = "text"]: fokus, vhod [type = "email"]: fokus {
obroba: 0;
}

: hover je odgovoren za elemente, nad katerimi se nahaja kazalec miške ali druga naprava. Ko uporabnik aktivira predmet na strani, na primer klikne povezavo, se prikaže psevdomodul: aktivni

Možnosti uporabe psevdo-razredov

Slogi: aktivni,: fokus,: hover - to je edinstven način komuniciranja z uporabnikom. Tako boste pozvani k vnosu podatkov, označevanju povezav, označevanju elementov, ki jih lahko kliknete. S pomočjo uspešnih učinkov motivirate obiskovalca, da vnese e-poštni naslov in se naroči na vaš poštni seznam. Zahvaljujoč lepi "Sign In!", "Read More!" Od tistih, ki so slučajno udarili stran, se bo želja po potovanju nadaljevala. Vendar ne uporabljajte psevdo-razredov zelo previdno. Če dodajate: lebdenje skoraj vseh elementov, lahko obiskovalci vašega spletnega mesta začnejo z morsko boleznijo zaradi množičnega povečanja ali utripanja predmetov. Uporabite psevdoklasni fokus CSS, da spremenite barvo robnih polj, nič več. Najboljši način za pravilno določitev: lebdeti je, da bo barva pisave temnejša, ko miško teče. Vendar se ne dotikajte velikosti - sosednji elementi so lahko prizadeti.