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.…
