Veteasabertu

Pseudo-clase :hover de CSS no funciona en iOS (iPhone, iPad e iPod)

16 de julio 2016
Pseudoclase :hover de CSS no funciona en iOS (iPhone, iPad e iPod)

Lo que vamos a ver en este artículo es algo curioso que sucede en ciertos terminales de pantalla táctil al usar la pseudo-clase :hover de CSS en una página web. A mi concretamente me ha ocurrido sólo en dispositivos iOS (iPhone, iPad e iPod), pero imagino que también es susceptible que ocurra en otros.

Había creado un <div> que contenía una lista dentro y que en estado de reposo quedaba oculta, de modo que cuando se pasara el ratón por encima, la lista se desplegase. Esto en ordenadores funcionaba correctamente al hacer rollover y en móviles al hacer click o mejor dicho tocar. Sin embargo, como no tengo ningún dispositivo de Apple no pude comprobarlo en éstos y no es hasta que un cliente me avisó, que pude saber que no funcionaba. La capa en cuestión quedaba siempre cerrada sin posibilidad de ver el interior.

Después de indagar un poco, al parecer la versión móvil de Safari por defecto sólo identifica ciertos elementos como interactivos, eso provoca que si aplicamos esa interactividad a un elemento que típicamente no lo es, el navegador no desencadena el evento al tocarlo. Esos elementos concretos son los siguientes, aunque para algunos es necesario que se cumplan además ciertos requisitos:

Para indicarle al navegador de los dispositivos iOS que queremos poder usar la pseudo-clase :hover en cualquier tipo de etiqueta que tengamos en la web, como un <div>, utilizaremos ontouchstart en el <body>, cuya sintaxis varía dependiendo de la versión que usemos de HTML.

Con esto hemos resuelto la mitad del problema, ya que ahora al tocar el <div> se abrirá la capa, pero al retirar el dedo se volverá a cerrar sin darnos posibilidad a pulsar nada dentro. Así que lo que debemos hacer es incluir la pseudo-clase :focus en el mismo estilo que hemos creado para :hover. De este modo conseguimos que al pulsar el foco se encuentre en la capa y por tanto quede abierta hasta que hagamos una interacción.

El motivo por el cual he dicho añadir :focus en lugar de sustituirlo es porque si bien nos servirá para Safari móvil de iPhone, iPad e iPod, en el ordenador nos obligaría a hacer click en el <div> para desplegarlo. Si dejamos los dos, conseguiremos el efecto adecuado en cada dispositivo sin que haya conflicto.

Aunque me he centrado en :hover, realmente se podría aplicar a otras pseudoclases que requieran interacción con el usuario en elementos que no se encuentren en la lista que comenté al principio. Es cuestión de adaptar la solución a cada caso concreto.

Publicado por Jesús Tovar

Categorías: CSS, HTML

Etiquetas: , ,

2 comentarios

  1. john dice:

    ¿Te ha ocurrido alguna vez que la barra de menú funcione perfecta en Pc pero en dispositivos móviles al desplegar el menú y clickar en un submenu se recoja sola la barra sin hacer nada?, lo raro es que si una categoría no tiene subcategoria si clickas te redirecciona pero si esta misma tiene subcategoria al clickar en alguna de ella solo se recoge el menú!!

    • Jesús Tovar dice:

      Hola John,

      Si hablamos de un menú que no usa JavaScript, esto que comentas suele deberse a motivos relacionados con jerarquía de elementos y las áreas sensibles que contienen los enlaces. Es decir, que normalmente hay un problema en el orden de las pseudo-clases que se aplican a los estados.

      Cuando un elemento del menú no tiene hijos, es decir, no tiene anidado un submenú se comporta como un enlace simple, haces click y te lleva donde corresponda. Sin embargo cuando es un elemento padre, que sirve para mostrar otros elementos que son dependientes, se puede producir un conflicto si no hemos definido bien las clases en CSS al encontrarse un enlace en el mismo lugar que el área sensible para mostrar ese submenú. Mientras en el PC los eventos de ratón click y over son diferentes y por tanto podemos diferenciar entre pasar el cursor por encima y pulsar, en los smartphones y tablets básicamente se fusionan debido al propio hardware ya que con el dedo solo se puede tocar.

      Prueba a revisar dónde has ubicado el evento :hover para asegurarte que está en el lugar correcto.

      Un saludo.

Pingback

Deja un comentario

Este sitio web utiliza cookies para mejorar la experiencia de usuario, si continúas navegando estás dando tu consentimiento. Para más información pincha aquí.

ACEPTAR
Aviso de cookies