Uno de los efectos más visuales que podemos realizar con CSS es el "hover", que ofrece al usuario una información visual y contextual a medida que se van realizando movimientos con el puntero del ratón. Los efectos hover que vamos a explicar en este artículo ayudan al usuario a saber que alguno de los elementos de la página es capaz de producir algún tipo de interactividad. Además de los típicos ejemplos sencillos veremos algunos efectos interesantes para sacarle partido a esta pseudo-clase de CSS.

Qué es hover

En CSS, "hover" es una pseudo-clase que permite aplicar estilos específicos a un elemento cuando el usuario pasa el cursor del ratón sobre él.

Este efecto es usado muy a menudo para indicar de manera visual a los usuarios que un elemento es interactivo y por lo tanto se puede hacer clic en él o realizar cualquier tipo de acción.

Para usar la pseudo-clase hover indicamos un selector seguido de ":hover". La sintaxis quedaría así:

h1:hover {
    background-color: orange;
    color: #fff;
}

Con el anterior codigo ejemplo tendríamos un efecto sobre los elementos H1 de la página, los cuales, al pasar el cursor de ratón sobre ellos, cambiarían de color de fondo y del texto.

Ahora podemos ver otro ejemplo en el que se cambiaría el color del texto de un enlace (<a>) a rojo cuando el usuario pase el ratón sobre él,:

a:hover {
    color: red;
}

Como has visto, es muy fácil aplicar el estilo con la pseudo clase :hover. Obviamemnte para que ese efecto se vea tiene que existir una diferencia entre el estilo del elemento de manera "normal y el estilo definido con el hover.

.elemento-interactivo {
    color: blue;
}
.elemento-interactivo:hover {
    color: red;
}

En este caso el elemento de la clase elemento-interactivo tendrá el texto de color azul y al pasar el ratón sobre él cambiará a rojo.

Ausencia de hover en dispositivos móviles

Antes de continuar es importante recordar que los efectos "hover" no aportan mucho o ningún valor en los dispositivos táctiles, como los móviles y las tablets. Si lo piensas verás que no existe el concepto de puntero del ratón, por lo que es imposible que representen el hover.

Realmente sí veremos el hover, pero solamente cuando se hace tap sobre el elemento, no antes, por lo que sigue sin servir de mucho.

Este detalle lo debemos de tener muy en cuenta para no hacer que el funcionamiento de las interfaces dependa exclusivamente de los efectos hover, ya que no podemos estar siempre seguros que éstos se llegarán a ejecutar.

Por tanto es ideal entender el hover como un complemento visual de utilidad para los ordenadores de escritorio, pero asumir que no siempre va a estar disponible en todos los dispositivos.

Combinar hover en selectores más complejos

Puedes usar :hover con cualquier selector que quieras. Por ejemplo en los elementos de una clase:

.miclase:hover {
  font-size: 2rem;
}

Pero también puedes combinarlo con otras pseudo-clases para lograr efectos más específicos. Por ejemplo, si sólo quieres aplicar un estilo hover a los enlaces que ya han sido visitados:

a:visited:hover {
    color: purple;
}

Combinar un hover con un before para insertar contenido al pasar el ratón por un elemento

Ahora vamos a ver otro ejemplo todavía más imaginativo pero práctico, que consiste en mostrar un icono al lado de un enlace cuando se coloca el ratón por encima del enlace.

Tenemos un código HTML de un enlace:

<a href="#" class="icon-hover">Enlace</a>

Ese enlace tiene una clase que se llama "icon-hover" y ahora, mediante CSS vamos a insertar un icono con una estrellita, que aparece al pasar el ratón por enlaces que tengan esa clase "icon-hover".

.icon-hover {
  position: relative;
  padding-left: 22px;
  /* Espacio para el icono ::before */
  text-decoration: none;
  color: #333;
  /* Color de texto del enlace */
  transition: color 0.3s;
  font-size: 1.125rem;
  /* Transición suave del color */
}

.icon-hover:hover {
  color: #007BFF;
  /* Color al hacer hover */
}

.icon-hover::before {
  content: '\2605';
  /* Contenido del pseudo-elemento (un carácter de estrella) */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  /* Inicialmente el icono es invisible */
  transition: opacity 0.3s;
  /* Transición suave de la opacidad */
}

.icon-hover:hover::before {
  opacity: 1;
  /* Al hacer hover, el icono se vuelve visible */
}

La técnica que hemos usado en este ejemplo es sencilla. Consiste en colocar una estrellita que estará siempre en el documento, aunque solamente permitimos que se vea en el momento del hover. Inicialmente la estrella es transparente y, al pasar el ratón sobre el enlace, es cuando hacemos que la estrella, que estaba transparente, pase a estar opaca. Para ello este código hace varias cosas, entre ellas queremos destacar:

• Cambiar el color de los enlaces al pasar el ratón por encima
• Mostrar un icono a la izquierda del enlace
• Aplicar una transición suavizada para el icono de la estrella, para que aparezca poco a poco, desde transparente a opaco.

Usar :hover para cambiar el estilo de otros elementos distintos al que se pone el ratón encima

Aunque no es tan frecuente, :hover nos permite todavía cosas más extrañas. Ahora vamos a ver como conseguir, con hover y usando solamente CSS, que al pasar el ratón sobre un elemento que se cambie el estilo de otro elemento. Puedes lograr esto usando combinaciones de selectores en CSS. Podemos ver ahora un par de ejemplos para ilustrar diferentes situaciones:

1. Cambiar el estilo CSS de un elemento que es siguiente

Supongamos que tienes dos elementos, y quieres que, al pasar el ratón sobre el primero, el siguiente cambie de estilo:

<div class="box"></div>
<p class="text">Texto aquí</p>

Esto lo conseguimos usando :hover sobre el primer elemento y usando el selector de hermano adyacente (+) para alcanzar el segundo:

.box:hover + .text {
    color: red; 
}

2. Cambiar el estilo de un elemento hijo

Supongamos que tienes una estructura padre e hijo (donde hijo está contenido por el padre). Ahora quieres que al pasar el ratón sobre el padre, cambie el estilo del hijo. Esto lo podemos hacer con el selector descendente (solo colocando un selector después de otro).

<div class="parent">
    <p class="child">Texto hijo</p>
</div>

Usando el selector descendente:

.parent:hover .child {
  color: blue; 
  font-weight: bold;
}

Estos son algunos ejemplos sobre cómo puedes seleccionar elementos con hover que no son exactamente el que se está poniendo el ratón encima. No obstante, si los requisitos de hover son un poco más complejos, por ejemplo cambiar el color de un elemento que no es hermano ni hijo ni está cercano, entonces seguramente tendrás que realizar uso de Javascript para cambiar los estilos de los elementos de manera programática.

Conclusión

Hemos visto qué es :hover y varios ejemplos con más o menos utilidad práctica. Esperamos que te hayan resultado interesantes y puedas aplicar el hover de manera sencilla y también avanzada.

Esta es una técnica fundamental para tus diseños ya que permite la creación de muchos efectos interesantes y útiles en diseño web, como menús desplegables, tooltips y animaciones que se activan al pasar el cursor sobre un elemento.