Efecto Hover: Aprende a usarlo correctamente en tus estilos CSS

La pseudo-clase :hover, es sin duda unas de las más utilizadas en CSS, ya que nos permite establecer un segundo estado a cualquier elemento, cuándo un usuario interactúa con este, por ejemplo, al pasar el cursor encima. Esta pseudo-clase existe desde los inicios del estándar de CSS, cuándo aún no existían pantallas táctiles.

Es por eso que al utilizarla en este tipo de pantallas, puede llegar a tener comportamientos no adecuados, dependiendo del navegador. Como por ejemplo, no funcionar del todo, provocar algún destello en el elemento con el estado hover o que el elemento se comporte como si tuviera el foco actual, por lo que debemos presionar otra parte de la pantalla para que éste pierda el efecto hover.

Efecto hover en pantallas táctiles y en pantallas con cursor.

Para evitar efectos secundarios con la pseudo-clase :hover, muchos desarrolladores web optaron por utilizar media queries estableciendo tamaños mínimos, por ejemplo:

button {
  color: #fff;
  background: dodgerblue;
}

@media (min-width: 1000px) {
  button:hover {
    background: blue;
  }
}

Para evitar aplicar el efecto hover en dispositivos móviles o tablets, pero debido a la evolución de las pantallas de estos dispositivos como la densidad de píxeles o incluso laptops con pantallas táctiles, utilizar media queries estableciendo tamaños mínimos no fue suficiente, así que se decidió crear un nuevo estándar que nos permite identificar si un dispositivo tiene cursor o no.

Interaction Media Features

Las media queries Interaction Media Featureses parte del estándar Media Queries Level 4 y son un conjunto de media queries que nos ayudan a detectar el tipo de interacción del dispositivo de los usuarios, si utiliza un cursor, si tiene pantalla táctil o incluso ambos.

Entre las media queries que son parte del estándar están:

• pointer
• hover
• any-pointer
• any-hover

Y si te preguntabas por su soporte en los navegadores, de verdad no hay razón para no empezar a utilizar las media queries de Interaction Media Features.

Puedes ver los datos más actualizados de soporte en los diferentes navegadores en el siguiente enlace: https://caniuse.com/css-media-interaction.

Media Pointer

La Media Query Pointer, nos permite identificar si un usuario tiene la capacidad de utilizar un dispositivo de entrada con un puntero (mouse) o no. La media query incluye 3 valores que nos permite controlar la precisión del dispositivo:

• coarse: Especifica que el usuario posee un dispositivo con precisión limitada. Por lo que si aplicamos esta media query, en una pantalla táctil será verdadera.
• fine: Especifica que el dispositivo del usuario posee una precisión exacta.
• none: Indica que el usuario no posee un dispositivo de entrada ya sea con una precisión limitada o precisa.

¿Cómo utilizar la Media Query Pointer?

Podemos utilizar la Media Query Pointer de las siguientes maneras:

Utilizando el valor coarse

/*
   Color de fondo del botón por defecto
   (en pantallas no táctiles).
*/
button {
  background: lightblue;
}

/*
   Si el dispositivo es táctil cambiamos
   el color de fondo y el texto del botón.
*/
@media (pointer: coarse) {
  button {
    background: dodgerblue;
    color: #fff;
  }
}

Utilizando el valor fine

/*
   Color de fondo del botón por defecto
   (en pantallas táctiles).
*/
button {
  background: lightblue;
}

/*
   Si el dispositivo NO es táctil cambiamos
   el color de fondo y el texto del botón.
*/
@media (pointer: fine) {
  button {
    background: dodgerblue;
    color: #fff;
  }
}

Media Hover

La Media Hover, por el contrario detecta si la entrada principal del usuario puede flotar encima de un elemento o no (por ejemplo un cursor). Para entender esto, es importante entender el funcionamiento del efecto hover.

¿Cómo funciona el efecto hover?

Cuándo aplicamos el efecto hover en un elemento, éste se activa cuando el cursor flota por encima y esa es la clave. Por eso, en pantallas táctiles dónde no hay un cursor que flote encima del elemento, este no se comporta cómo esperamos.

La media query hover, posee 2 valores:

• hover: Especifica que el usuario posee un dispositivo de entrada con la capacidad de flotar sobre un elemento.
• none: Indica que el usuario no posee un dispositivo que flote sobre un elemento.

¿Cómo utilizar la Media Query Hover?

Podemos hacer uso de la pseudo-clase :hover y utilizar la media hover:

button {
  background: palegreen;
}

@media (hover: hover) {
  button:hover {
    background: mediumseagreen;
    color: #fff;
  }
}

Limitaciones de la Media Pointer y Media Hover

Si bien la Media Pointer y la Media Hover son útiles en algunos casos, poseen una gran limitación y es que no toman en cuenta que el dispositivo de los usuarios pueden poseer múltiples tipos de entradas y estas media queries hacen la verificación de un solo tipo.

¿Qué tipos de entradas existen?

En resumen, podemos decir que un usuario puede interactuar con nuestro sitio web a través de una pantalla táctil o con un puntero (mouse). Pero debemos diferenciar cuál es la entrada principal en un dispositivo, así como la posibilidad de admitir entradas secundarias, con estos diferentes casos:

Para los teléfonos móviles o tablets, por defecto su entrada principal es táctil, pero también podemos tener la capacidad de conectar un mouse bluetooth y si el usuario prefiere navegar usando esta otra entrada, es ahí la limitación dónde las media queries pointer: fine y hover: hover no detectan este comportamiento.

También existe la posibilidad de usar un lápiz óptico en algunos dispositivos, dónde en este caso la media query pointer: coarse no funciona, si bien, la entrada principal es táctil pero al utilizar el lápiz óptico se identificará la media query pointer: fine como verdadera.

Por el contrario a los teléfonos móviles o tablets, la entrada principal de las laptops es mediante un cursor, pero también existen computadoras portátiles con pantallas táctiles y si el usuario prefiere navegar utilizando solamente su pantalla, las media queries pointer: fine y hover: hover ya no tendrían ningún sentido.

En la siguiente tabla podemos ver cómo se comportan la Media Pointer y Media Hover en los diferentes tipos de entradas (principales) que puede utilizar un usuario:

En resumen, si queremos solamente evaluar la entrada principal del dispositivo del usuario podemos usar las media queries pointer y hover, pero si queremos tener control total a las opciones de entradas que puede utilizar un visitante de nuestro sitio web, es dónde entran en juego las media queries any-pointer y any-hover.

Media Any Pointer

La Media Query Any Pointer, tiene la capacidad de comprobar si cualquier dispositivo (sea táctil o no), puede usar un cursor. Es muy útil para detectar entradas secundarias que puede utilizar un usuario, por el contrario a la Media Pointer.

La Media Any Pointer tiene 3 valores:

• coarse: El dispositivo del usuario tiene al menos una entrada con precisión limitada.
• fine. El usuario al menos puede usar una entrada con precisión exacta.
• none: No hay ningún tipo de entrada dónde podamos usar un cursor (no es igual a que el dispositivo tenga pantalla táctil).

¿Cómo utilizar la Media Query Pointer?

Para utilizar la Media Query Any Pointer podemos hacerlo de las siguientes maneras:

Utilizando el valor coarse

/*
   Color de fondo del botón por defecto.
*/
button {
  background: palevioletred;
}

/*
   Si el dispositivo al menos tiene una entrada táctil
   cambiamos el color de fondo y el texto del botón.
*/
@media (any-pointer: coarse) {
  button {
    background: mediumvioletred;
    color: #fff;
  }
}

Utilizando el valor fine

/*
   Color de fondo del botón por defecto.
*/
button {
  background: palevioletred;
}

/*
   Si el dispositivo al menos puede utilizar un cursor
   cambiamos el color de fondo y el texto del botón.
*/
@media (any-pointer: fine) {
  button {
    background: mediumvioletred;
    color: #fff;
  }
}

Media Any Hover

Para verificar si al menos una entrada del dispositivo del usuario, puede flotar sobre algún elemento y activar el estado :hover, podemos usar la Media Query Any Hover. Es muy útil cuándo por ejemplo en nuestro móvil o tablet optamos por utilizar un cursor (mouse) como entrada secundaria, así evitamos la limitación de la Media Hover.

La Media Any Hover también posee sólo 2 valores:

• hover: El dispositivo del usuario tiene al menos una entrada que puede activar el estado hover de un elemento.
• none: No hay ningún tipo de entrada que pueda activar el estado hover.

¿Cómo utilizar la Media Query Any Hover?

Al utilizar la Media Any Hover, también podemos hacer uso de la pseudo-clase :hover:

button {
  background: Lavender;
}

@media (any-hover: hover) {
  button:hover {
    background: mediumpurple;
    color: #fff;
  }
}

Ventajas de la Media Any Pointer y Media Any Hover

Como seguramente ya habrás notado la mayor ventaja de estas 2 media queries, es su capacidad de detectar múltiples entradas que puedan llegar a utilizar los usuarios sin importar cuál sea la entrada principal de su dispositivo, es por eso que es mucho más conveniente llegar a usar la Media Any Pointer y Media Any Hover.

En la siguiente tabla, podemos comparar las media queries que detectan solamente la entrada principal, frente a las que detectan múltiples entradas en los diferentes casos:

Otros casos de uso

Combinar media queries

Como bien podrías saber es posible combinar media queries usando el operador and, así que si necesitamos hacer algún tipo de comprobación un poco más compleja con las Media Queries de Interaction Media Features, podemos hacerlo:

@media (pointer: coarse) and (any-pointer: fine) {
  /*
    Evalúamos que la entrada principal sea táctil,
    pero que también el usuario podría usar algún
    dispositivo con precisión exacta, como un mouse.
  */
}

Detectar el tipo de entrada mediante JavaScript

En algunos casos podríamos necesitar ejecutar algún código en JavaScript en el que necesitemos detectar que el usuario se encuentre usando una pantalla táctil (o cualquier otro caso que se nos ocurra).

const isPrimaryTouch = window.matchMedia('(pointer: coarse)').matches

// O también...
const isTouch = window.matchMedia('(any-pointer: coarse)').matches

Aunque podríamos utilizar el ejemplo anterior, para detectar si el dispositivo puede usar una pantalla táctil y establecer Eventos Touch, no se aconseja hacerlo del todo, ya que los Eventos de Punterotambién funcionan en este tipo de pantallas y son bastantes compatibles o los típicos Eventos del Mouse(los eventos de puntero y eventos del mouse tienen diferencias notables, así que veremos sus diferencias en una publicación en el futuro 😉). Además del código extra (o duplicado) que tendremos que escribir para hacer estas validaciones, así que todo depende de tus necesidades. Obviamente no estamos limitados a esos casos de uso.

Efecto hover con any-pointer: fine

Como habrás visto en la tabla anterior, la Media Any Pointer con su valor fine tiene el mismo tipo de validez que la Media Any Hover con su valor hover, por lo que también podemos hacer esto:

button {
  background: Lavender;
}

@media (any-pointer: fine) {
  button:hover {
    background: mediumpurple;
    color: #fff;
  }
}

Siendo un poco creativo.

Alternativa al Efecto Hover en pantallas táctiles

Ahora bien, si necesitamos replicar este efecto en pantallas táctiles (en el caso dónde el usuario no puede hacer uso de un dispositivo con puntero), podemos utilizar otra pseudo-clase: :active. Esta pseudo-clase se activa cuándo el usuario hace click (o touch) sobre un elemento y termina cuándo deja de hacer click, por lo que es muy útil en este caso ya que el usuario no deberá presionar en otra parte de la pantalla para quitar los estilos del elemento o cualquier otro efecto secundario que se produzca (como ocurre con el efecto hover), veamos un ejemplo:

button {
  backgroud: pink;
}

button:active {
  background: crimson;
  color: #fff;
}

/*
  También podemos mantener el mismo estilo
  cuándo se usa el efecto hover.
 */
@media (any-hover: hover) {
  button:hover {
    background: crimson;
    color: #fff;
  }
}

Este es el resultado (obviamente he añadido otros estilos para el botón):

Efecto active en pantallas táctiles y el efecto hover y active en pantallas con cursor.

Este ha sido un repaso completo a las nuevas media queries Interaction Media Features, que como habrás visto son muy útiles para realizar efectos o diseños pensados en el usuario ya que tendremos en cuenta el tipo de entrada que pueden llegar a utilizar, para así aplicar el tipo de estilo o efecto que necesitemos dependiendo de cada caso. Y de cómo evitar los efectos secundarios al utilizar la pseudo-clase :hover en pantallas táctiles.