dnes je 30.11.2022

Input:

WWW stránky prakticky - 20. část

23.11.2007, , Zdroj: Verlag Dashöfer

Využijeme získané zkušenosti a oživíme navigační tlačítka našich stránek pomocí tzv. pseudotřídy.

Na některých internetových stránkách můžeme vidět tlačítka, jejichž se po umístění kurzoru myší změní - budou vypadat např. jako stisknutá.

Tento efekt můžeme vytvořit pomocí tzv. pseudotřídy. V souvislosti se styly jsme se již mnohokrát zmiňovali o třídách - víme tedy, že zápis třídy musí začínat znakem tečky. V našem souboru styly.css např. existuje definice třídy a.tlacitko, pomocí které jsme určili, jak bude tlačítko vypadat.

Pseudotřídu zapisujeme se znakem dvojtečky. Konkrétně tedy, pokud aplikujeme pseudotřídu v rámci třídy a.tlacitko, bude zápis vypadat obecně takto:

a.tlacitko:hover
{
....různé vlastnosti tlačítka
}
Pseudotřída hover konkrétně tedy definuje, jak má object vypadat po umístění kurzoru myši.

Ve stylech musíme mít nadefinovanou tedy jak základní třídu (v našem případě) a.tlacitko, tak i třídu s pseudotřídou.
Náš pracovní postup může být tedy zcela jednoduchý. Otevřeme pomocí programu TopStyle náš soubor styly.css. Označíme celou definici třídy a.tlacitko:

Tuto definici okopírujeme běžným způsobem - CTRL+C. Na konci posledního řádku odřádkujeme a provedeme vložení - CTRL+V.
Nově vloženou definici nyní jenom poupravíme:
Do řádku a.tlacitko dopíšeme :hover. Kurzor ponecháme v úseku této nové definice.

Nahrávám...
Nahrávám...