Ukázka pseudotříd :hover, :active, :focus a :target v SVG

:hover, :active: Najedete myší a klikněte na první obdélník. Při najetí se vyplní zlatou, při stisku tlačítka myši zčervená.
:focus: Přejděte klávesou Tab na druhý obdélník nebo na něj klikněte, aby dostal fokus, a uvidíte změnu barvy (světle modrá) a případně naznačený outline .
:target: Klikněte na odkaz "Zvýraznit targetRect" – stránka se přesune k obdélníku s id="targetRect" , a ten z růžoví. Odkaz # zruší zaměření, takže obdélník přestane být cílem.

Vyzkoušejte jednotlivé pseudotřídy:
• :hover – najedete myší na obdélník.
• :active – klikněte a podržte myš na obdélníku.
• :focus – klikněte na obdélník nebo na něj přejděte klávesou Tab (prvek je tabindex="0").
• :target – klikněte na odkaz níže; obdélník se zvýrazní, pokud je v URL hash s jeho ID.

Zvýraznit targetRect | Zrušit zvýraznění

Tipy k vyzkoušení:

:hover, :active: Najedete myší a klikněte na první obdélník. Při najetí se vyplní zlatou, při stisku tlačítka myši zčervená.
:focus: Přejděte klávesou Tab na druhý obdélník nebo na něj klikněte, aby dostal fokus, a uvidíte změnu barvy (světle modrá) a případně naznačený outline.
:target: Klikněte na odkaz "Zvýraznit targetRect" – stránka se přesune k obdélníku s id="targetRect", a ten z růžoví. Odkaz # zruší zaměření, takže obdélník přestane být cílem.