Tenho alguns menus css no meu site que se expandem com :hover
(sem js)
Isso funciona de forma semi-quebrada em iDevices, por exemplo, um toque ativará a :hover
regra e expandirá o menu, mas tocar em outro lugar não remove o :hover
. Além disso, se houver um link dentro do elemento que está :hover
inserido, você deve tocar duas vezes para ativar o link (o primeiro toque aciona :hover
, o segundo toque aciona o link).
Consegui fazer as coisas funcionarem bem no iphone vinculando o touchstart
evento.
O problema é que às vezes o safari móvel ainda escolhe acionar a :hover
regra do css em vez de meus touchstart
eventos!
Eu sei que este é o problema porque quando eu desabilito todas as :hover
regras manualmente no css, o safari móvel funciona muito bem (mas os navegadores regulares obviamente não funcionam mais).
Existe uma maneira de "cancelar" :hover
regras dinamicamente para certos elementos quando o usuário está em um safári móvel?
Veja e compare o comportamento do iOS aqui: http://jsfiddle.net/74s35/3/ Observação: apenas algumas propriedades css acionam o comportamento de dois cliques, por exemplo, display: none; mas não fundo: vermelho; ou decoração de texto: sublinhado;