Evitando :hover

Las pantallas táctiles dominan el mercado, y en las pantallas táctiles no sirve de nada el selector :hover, al contrario: ¡Estorba!

Es común entrar a un sitio web y no poder acceder a todo el menú porque tu celular es de pantalla táctil y el menú utiliza :hover para funcionar, como los famosos "drop-down menus" o los estilo "acordeón". Todo esto resulta muy frustrante, y solo dan ganas de salir corriendo de esa página y no volver jamás. Es por esto que me he propuesto evitar usar el selector :hover en todos mis diseños web (o al menos reducirlo a lo más mínimo posible) y creo que todos deberíamos hacer lo mismo.

Reemplazar hover por clic es la solución más lógica y sencilla. Al momento de crear un menú para tu sitio, o un tooltip, o lo que sea que creas que necesite pasar el mouse por encima para poder funcionar, ¿es realmente necesario que funcione de esa manera? Elegir algo tan simple y primitivo como clic en lugar de :hover mejorará el desempeño de tu web en muchas plataformas, incluso en esos celulares de pantalla pequeña no-táctil en los que es muy molesto desplegar un menú accidentalmente con solo pasar el cursor.

Ahora bien, debemos pensar en las pantallas táctiles pero no debemos olvidarnos del clásico mouse. No es necesario que eliminemos hover por completo, pequeños detalles como subrayar un link o sombrear un div al pasar el cursor no están de más y aunque aveces con un simple cursor:pointer basta, no queremos que nuestra web parezca una aburrida imagen estática.

0 comentarios