Tengo algunos menús css en mi sitio que se expanden con :hover
(sin js)
Esto funciona de forma semi-rota en iDevices, por ejemplo, un toque activará la :hover
regla y expandirá el menú, pero luego tocar en otro lugar no elimina el :hover
. Además, si hay un enlace dentro del elemento que está :hover
editado, debe tocar dos veces para activar el enlace (el primer toque desencadena :hover
, el segundo toque desencadena el enlace).
He podido hacer que las cosas funcionen bien en el iPhone vinculando el touchstart
evento.
¡El problema es que a veces el safari móvil todavía elige activar la :hover
regla desde el CSS en lugar de mis touchstart
eventos!
Sé que este es el problema porque cuando desactivo todas las :hover
reglas manualmente en el CSS, el safari móvil funciona muy bien (pero los navegadores normales obviamente ya no lo hacen).
¿Hay alguna forma de "cancelar" dinámicamente las :hover
reglas para ciertos elementos cuando el usuario está en un safari móvil?
Vea y compare el comportamiento de iOS aquí: http://jsfiddle.net/74s35/3/ Nota: que solo algunas propiedades de CSS activan el comportamiento de dos clics, por ejemplo, display: none; pero no fondo: rojo; o decoración de texto: subrayado;