Resolver estados de desplazamiento fijo con @media (hover: hover)

Mezo Istvan hace un buen trabajo al cubrir el problema y su solución en una publicación de blog en Medium¹ .

Si tocas algo que tiene un :hoverestado pero no sales de la página, entonces, en un dispositivo móvil, existe la posibilidad de que :hoverel estado “se mantenga”. Verá esto con elementos como enlaces de salto utilizados como pestañas o botones que activan la funcionalidad en la página.

button:hover {  border: 3px solid green; /* might stick! */}

La solución, o truco, es una nueva (más o menos) consulta de medios “CSS4” que le permite aplicar estilos solo en dispositivos con capacidad de desplazamiento.

@media (hover: hover) {  button:hover {    border: 3px solid green; /* solves sticky problem */  }}

Su típico dispositivo móvil con pantalla táctil fallará en esa consulta de medios, el estilo no se aplicará y evitará el problema pegajoso.

El soporte es sólido , así que no hay que preocuparse mucho.

1. Casi parece que tenemos que disculparnos por vincular cosas en Medium últimamente. No tengo idea de lo que vas a experimentar cuando llegues allí. ¿Podrás simplemente leerlo? ¿Será un adelanto en el que tendrás que iniciar sesión para leer más? ¿Estará detrás de un muro de pago? No tengo ni idea. En este caso, con suerte, esta publicación de enlace tiene suficiente información que no le impide aprender nada.

Enlace directo →