Hover effect iPhone/iPad


Hace un par de semanas estaba trabajando en un nuevo sitio web, el cual debía de tener como portada la imagen de una casa, y esta a su vez, unos circulitos en diferentes posiciones y, cuando el usuario pasara el cursor sobre alguno, se desplegaría una imagen con alguna leyenda representando alguna característica del producto.

El sitio se ve de la siguiente manera:

Al hacer hover en alguno de los círculos, con animaciones de CSS3 hice una especie de fade in para mostrar la imagen:

Todo funcionaba bien y el sitio respondía perfectamente en las diferentes resoluciones en las que se dimensionaba la ventana del navegador. El problema surgió cuando se quiso visualizar el sitio en un iPad de tercera generación. Como la resolución es muy parecida a una netbook, el sitio se rendereaba completo con los circulitos sobre la casa para que el usuario al hacer hover sobre alguno de ellos pudiera ver alguna característica de la casa.

Navegando el red para poder solucionar el problema, encontré que Safari mobile tiene un problema con la pseudo clase focus, que sería una alternativa al hover en los dispositivos móviles. En muchos sitios encontré que eso se solucionaba agregando un atributo tabindex al elemento; en mi caso sería algo así:

<a href="#" class="hide" tabindex="1">[hide]</a>
<a href="#" class="show" tabindex="2">[show]</a>

El método no solucionó mi problema, por lo que seguí investigando y encontré una manera mucho más sencilla:
En un dispositivo móvil para imitar un hover siempre el usuario tocará el elemento, por lo tanto se activa la pseudo clase active. Para evitar el comportamiento normal de un link, solo habría que agregar el atributo onclick al elemento de la siguiente manera:

<div onclick="return true" class="bolita bolita-6">
    <img alt="" src="images/circulos/6.png">
</div>

Simplemente con agregar el atributo onclick a cada uno de los elementos que tenían el efecto en el hover, se solucionó mi problema.

Anuncios
Esta entrada fue publicada el 22 septiembre, 2014 a las 23:24. Se guardó como Tech y etiquetado como , , , , , , , , . Añadir a marcadores el enlace permanente. Sigue todos los comentarios aquí gracias a la fuente RSS para esta entrada.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: