Ajustes para dispositivos táctiles

Un interactivo web multidispositivo no solo debe ajustarse al espacio de presentación (ser responsive), además hay otras funciones que no son útiles, que en vez de apoyar la experiencia solo producen errores de concepto, como por ejemplo el evento hover.

En los CSS del interactivo le damos un valor al evento de pasar con el ratón por encima de un elemnto interactivo para llamar la atención, pero ese efecto falla en los dispositivos con pantalla táctil, provocando que el elemento se quede en el estado hover hasta que se recarge de nuevo la pantalla.

Para evitar ese efecto hay que utilizar un «media query» de CSS en concreto el hover.

De normal para marcar el estado del elemento a al hacer hover usaríamos:

a:hover { color: blue; }

Para que no se produzca el error de funcionamiento lo haremos así:

@media (hover: none) {
    a:hover { color: inherit; }
}