Skrývání prvků
Poslední hodnota vlastnosti display, na kterou se podíváme, je none (žádné). Prvek s display: none se vůbec nezobrazí a nezabírá žádné místo: prvky za ním se posunou nahoru, jako by tam nebyl. V HTML přitom pořád je, prohlížeč ho jen neukáže.
Porovnejte to s opacity: 0, kterou znáte z lekce o barvách. Ta prvek udělá úplně průhledným, ale prvek dál zabírá své místo, takže na stránce zůstane prázdná mezera.
Skrývání se hodí pro obsah, který se má objevit jen v určitou chvíli: menu, které se otevře, když na něj najedete myší, bublina s nápovědou nebo odpověď na kvízovou otázku. Takový prvek skryjeme pomocí display: none a v pravidle s pseudotřídou :hover, kterou znáte z lekce o selektorech, ho zase zobrazíme.
Do části Fyziologie jsme přidali krátký kvíz. Skryjme jeho odpověď, dokud na kvíz čtenář nenajede myší.
Jak psát:
"
{
}
#
Pokyny
Vytvořte pravidlo pro .odpoved, které nastaví display: none. Odpověď zmizí a rámeček kvízu se zmenší, protože skrytý odstavec nezabírá žádné místo.
Vytvořte pravidlo pro .kviz:hover .odpoved, které nastaví display: block. Jeho selektor vybírá odpověď v kvízu, ale jen ve chvíli, kdy je nad kvízem ukazatel myši. Má vyšší specificitu než .odpoved, takže když na kvíz najedete, vyhraje. Spusťte kód a najeďte myší na kvíz: odpověď se objeví.
Začněte programovat zdarma
4/10