Když nefunguje hover efekt v Exploreru
Explorer 7 napravil mnohé chyby svých předchůdců. Starší verze ale dál straší (a bude), proto musíme ladit stránky i pro ni. Jednou z těchto nepříjemností je chyba pseudotřídy hover – po opuštění prvku se nevrací jeho původní styl.
Problém vzniká ve chvíli, kdy do odkazu vložíte další element a
pokusíte se ho nastylovat zápisem např. a:hover span {…}.
Prvek se sice pod kurzorem změní, ale už se nevrátí k původnímu
vzhledu. Problém je údajně v distribuci události potomkům.
Řešení:
Donutit mateřský prvek (element <a>)
k překreslení. Jednoduchým způsobem je např. změna zarovnání
pozadí. Funguje dokonce i v případě, že v pozadí prvku
obrázek nemáte.
Příklad:
a {background-position: top left};
a:hover {background-position: bottom left};
a span {background-image: url('image_off.png');}
a:hover span {background-image:
url('image_on.png');}
Odkaz už funguje podle našich představ, ale bude vám nejspíš vadit problikávání pozadí. Explorer si totiž pokaždé načte obrázek znovu, proto nastává prodleva mezi zhasnutím prvního a rozsvícením druhého stavu. To lze odstranit tak, že problematický prvek podložíme ještě jedním, který používá stejné pozadí, ale nemění vzhled při přejetí myší.