Pseudo triedy CSS: focus ,: hover: active

Ak ste pracovali s CSS, viete, že štýly sú aplikované na selektory, ktoré naopak obsahujú prvky HTML. Ale nie vždy. Existuje trieda fantómov, ktorá sa vyskytuje iba v určitých stavoch objektu. Napríklad stlačíte tlačidlo alebo zvolené vstupné pole. V takýchto špeciálnych prípadoch existujú pseudotriedy CSS: focus ,: hover ,: active.

Dynamické pseudotriedy

CSS definuje tri dynamické pseudotriedy: focus ,: hover ,: active. Zmení vzhľad objektu s určitými akciami používateľa. Znamená to, že pre ich vzhľad je potrebná nevyhnutná podmienka:

.button: hover {
border: 1px solid # 333;
}
. Tlačidlo: aktívny {
opacita: .5;
}

V tomto príklade, kým používateľ klikne na ukazovateľ myši na položke s tlačidlom triedy, nezobrazia sa položky v štýle: Hover.

Štýly: aktívny ,: zameranie,: vznášať sa - to je jedinečný spôsob komunikácie s používateľom. Takže budete vyzvaní, kde zadávať údaje, zvýrazniť odkazy, zvýrazniť položky, na ktoré môžete kliknúť. Pomocou úspešných efektov motivujete návštevníka, aby zadal e-mailovú adresu a prihlásil sa na odber vášho mailing listu. Vďaka prekrásnemu prihláseniu! "Prečítajte si viac!" Od tých, ktorí náhodou narazili na stránku, bude túžba cestovať ďalej. Ale nepoužívajte pseudotriedy veľmi starostlivo. Ak pridáte: vznášanie takmer všetkých prvkov, návštevníci vášho webu môžu začať chorobu mora z masívneho nárastu alebo blikajúcich objektov. Použiť zaostrenie pseudotriedy CSS na zmenu farby hraníc polí už nie. Najlepší spôsob, ako správne označiť: vznášať sa má farba písma tmavšia pri kurze myši. Ale nedotýkajte sa veľkosti - môžu byť ovplyvnené susedné prvky.

Súvisiace publikácie