Použití :hover pseudo classy je na dotykovém zařízení celkem pasé, jelikož nedokáži emulovat to, že přes element jen přejíždíme, ale nechceme na něj kliknout.
No jo, ale většina stránek s tímto CSS prvkem počítá a někdy se bez tohoto elementu nedá web ovládat, hlavně u takových, které mají určité prvky schovány pod najetím kurzoru na určité místo na stránce (např. hover menu).
Apple si to na svých zařízeních vytvořil tak, že hover se snaží emulovat a to tím, že pro aktivace se provádí kliknutím na element, tím se aktivuje hover efekt a po druhém kliknutí se hover efekt vytratí.
Problém nastává, pokud je hover efekt použit na A HREF elementy. Jelikož zde kliknutím aktivujeme pouze hover efekt, ale stránka zůstává pořád na stejné adrese a nepřesune nás na místo, na které odkazuje HREF. To se provede tzv. dvojklikem, tedy rychlejším dvojkliknutím na daný element.
U jistého projektu mi toto dělalo problém ve vyjíždějícím menu (hover menu). Stávalo se, že na vyjeté menu se na jednotlivé elementy nedá kliknout, a to ani dvojklikem. Nevím přesně, čím to je, snad nějaký hover v CSS, který toto zabraňuje. Nicméně jsem to vyřešil jednoduchým javascriptem:
$('.submenuContent-in a').live('touchend', function (e) {
e.preventDefault();
location.href = $(this).attr('href');
});
Nyní mi tlačítka funguji tak, jak mají a na desktop to nemá vliv, jelikož eventa TOUCHEND funguje pouze na dotykových zařízeních.
Více se o tomto problému dočtete třeba zde