Pseudo třídy CSS: focus ,: hover: aktivní

Pokud jste pracovali s CSS, pak víte, že styly jsou aplikovány na selektory, které naopak obsahují prvky HTML. Ale ne vždy. Existuje třída fantomů, která se vyskytuje pouze v určitých stavech objektu. Například je stisknuto tlačítko nebo vybrané zadávací pole. U takových zvláštních případů existují pseudo-třídy CSS: focus ,: hover ,: active.

Dynamické pseudotřídy

CSS definuje tři dynamické pseudotřídy: focus ,: hover ,: active. Změnou vzhledu objektu s určitými akcemi uživatele. To znamená, že pro jejich vzhled je nutná nezbytná podmínka:

.button: hover {
border: 1px solid # 333;
}
. Tlačítko: aktivní {
neprůhlednost: .5;
}

V tomto příkladu, dokud uživatel klepne na ukazatel myši v položce s tlačítkem třídy, se položky ve vzhledu: nezobrazí.

Styly: aktivní,: focus ,: hover - to je jedinečný způsob komunikace s uživatelem. Takže budete vyzváni, kde zadat data, zvýraznit odkazy, zvýraznit položky, na které můžete kliknout. S pomocí úspěšných efektů motivujete návštěvníka k zadání e-mailové adresy a přihlášení k vašemu mailing listu. Díky krásnému přihlašování! "Přečtěte si více!" Od těch, kteří náhodou narazili na stránku, bude touha cestovat dál. Ale nepoužívejte pseudo-třídy velmi pečlivě. Pokud přidáte: vznášející se téměř všechny prvky, mohou návštěvníci vašeho webu spustit námořní onemocnění z masivního nárůstu nebo blikajících objektů. Aplikujte fokus CSS pseudotřídní, abyste změnili barvu hranic polí, ne více. Nejlepší způsob, jak správně označit: vznášením je vytvořit tmavší barvu písma při kurzorování myší. Ale nedotýkejte se velikosti - sousední prvky mohou být ovlivněny.

Související publikace