Pseudoclases CSS :hover

La pseudoclase de CSS :hover  es una herramienta muy útil en el diseño de interfaces web, ya que permite  aplicar estilos específicos a los elementos cuando el usuario posiciona el cursor del ratón sobre ellos.   Al pasar el cursor sobre un elemento con :hover, podemos, sin necesidad de hacer clic, cambiar su color, tamaño, posición u otros aspectos visuales para proporcionar retroalimentación inmediata al usuario. De esta forma, se destaca la interactividad de los elementos y se mejora la navegabilidad, facilitando la interacción con la interfaz web.

Sintaxis de CSS :hover

La sintaxis para usar :hover es directa. Se aplica al selector del elemento que deseas estilizar al ser sobrevolado por el cursor del usuario:

CSS
selector:hover {
/* estilos a aplicar */
}

Ejemplos de uso

1.- Cambiar el color de fondo y el texto de un botón

Este ejemplo utiliza un simple botón HTML. La clase btn se utiliza para aplicar estilos CSS específicos.

HTML
<button class="btn">Pasa el mouse por encima</button>

El CSS define los estilos iniciales del botón y luego utiliza :hover para cambiar el color de fondo a un azul intenso (#3498db) y el color del texto a blanco cuando el usuario pasa el cursor sobre el botón.

CSS
.btn {
background-color: #555;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}

.btn:hover {
background-color: #3498db;
color:#000;
}

La propiedad transition asegura que el cambio de color sea suave, mejorando la experiencia visual.

2.- Subrayar un enlace al pasar el mouse

Este código crea un enlace simple. Nota que no hay clases o ID específicos asignados, ya que aplicaremos el estilo directamente al elemento <a>.

HTML
<a href="#">Pasa el mouse aquí</a>

El CSS aplica el pseudoclase :hover al elemento <a> para añadir un subrayado al texto cuando el cursor pasa por encima.

CSS
a {
color: #3498db;
text-decoration: none; 
transition: text-decoration 0.3s ease;
}

a:hover {
text-decoration: underline; 
}

El uso de transition hace que el subrayado aparezca de manera suave, en lugar de instantáneamente, al pasar el cursor sobre el enlace.

3.- Efecto de sombra en una tarjeta al pasar el mouse

Este ejemplo utiliza un div con la clase card para simular una tarjeta. Dentro del div, puedes colocar cualquier contenido que desees mostrar en la tarjeta.

HTML
<div class="card">Contenido de la tarjeta</div>

Inicialmente, la tarjeta tiene una sombra ligera para darle profundidad. Al aplicar :hover, la sombra se intensifica, creando un efecto de elevación visual cuando el usuario pasa el cursor sobre la tarjeta.

CSS
.card {
padding: 20px;
margin: 10px 0;
background-color: #fff;
border: 1px solid #ddd;
box-shadow: 0 8px 8px rgba(0,0,0,0.1);
transition: box-shadow 0.3s ease;
}

.card:hover {
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

La transición suave de la sombra mejora la interacción, indicando al usuario que la tarjeta es un elemento interactivo.

Técnicas avanzadas de CSS :hover en diseño web

Más allá de su uso básico para cambiar colores o fondos, existen técnicas avanzadas que aprovechan esta pseudoclase para elevar la experiencia de usuario. Aquí exploramos algunas de estas técnicas avanzadas, sin código, enfocándonos en la conceptualización y aplicación de cada una.

Transiciones y animaciones

Una de las aplicaciones más poderosas de :hover es su combinación con transiciones y animaciones CSS. Esto permite crear efectos visuales fluidos que responden a la interacción del usuario, como elementos que se deslizan, giran, crecen o cambian de color gradualmente. La clave aquí es utilizar :hover para iniciar una transición o animación que haga que la interacción sea más atractiva y menos estática, mejorando la retroalimentación visual y haciendo que la interfaz sea más viva.

Efectos de profundidad y sombra

Utilizar :hover para añadir o modificar sombras puede crear un efecto de profundidad, sugiriendo que el elemento se eleva sobre la página. Esto es especialmente efectivo en tarjetas, botones o imágenes, donde el efecto de «levantarse» al pasar el mouse puede incrementar la claridad de la interfaz, indicando claramente qué elementos son interactivos. La técnica avanzada aquí radica en el uso sutil de sombras y la elección de valores que simulen la iluminación natural.

Efectos de desenfoque y filtrado

:hover puede utilizarse para aplicar efectos de desenfoque o filtrado a imágenes y fondos, creando un contraste visual entre el elemento interactivo y su entorno. Esta técnica puede dirigir eficazmente la atención del usuario hacia o desde ciertos elementos, dependiendo de cómo se aplique el desenfoque. Por ejemplo, desenfocar el fondo mientras se mantiene enfocado un elemento puede ayudar a crear una sensación de foco y jerarquía visual.

Cambio de contenido

Más allá de los cambios visuales, :hover puede indicar un cambio en el contenido que se muestra, como actualizar el texto de un elemento o revelar información adicional que estaba oculta. Esta técnica puede ser especialmente útil en interfaces densas donde el espacio es limitado. Al pasar el mouse, el usuario puede descubrir más detalles sobre un producto o servicio sin necesidad de hacer clic y sin sobrecargar la vista inicial.

Interacciones de elementos hermanos

La pseudoclase de CSS :hover no se limita a afectar solo al elemento sobre el que se pasa el mouse. Con técnicas avanzadas, se puede utilizar para cambiar el estilo de elementos hermanos o incluso de un contenedor padre, permitiendo crear efectos interesantes como resaltar otros elementos relacionados cuando uno está en foco. Esto puede ayudar a crear narrativas visuales o guiar al usuario a través de una serie de pasos o elementos relacionados.

Integración con SVG y gráficos

Cuando se combina con gráficos vectoriales escalables (SVG), :hover puede utilizarse para controlar cambios y animaciones dentro de los gráficos. Desde cambiar colores y opacidades hasta iniciar animaciones complejas dentro del SVG, esta técnica permite una gran variedad de efectos visuales que pueden hacer que una página web destaque.

Sobre accesibilidad

Aunque :hover mejora significativamente la interactividad visual, es importante  considerar la accesibilidad. Los cambios visuales deben ser complementados con indicaciones claras de interactividad para usuarios que dependen del teclado o tecnologías de asistencia, como lectores de pantalla. Asegurar que todos los estados interactivos (:link, :visited, :focus, :active) sean estilísticamente distintos mejora la accesibilidad general de un sitio web.

Especificaciones de CSS:hover

La pseudoclase :hover es parte de la especificación de CSS Level 3 de la W3C. Está diseñado para ser usado en cualquier elemento HTML, no solo en enlaces, lo que permite una amplia gama de aplicaciones en diseño web. La especificación fomenta su uso creativo  mejorar la experiencia del usuario final.

Compatibilidad con navegadores

Se trata de una pseudoclase compatible con todos los navegadores modernos, incluidos Chrome, Firefox, Safari, Edge y Opera, así como con versiones anteriores de Internet Explorer (desde IE7). Sin embargo, es importante recordar que la forma específica en que los efectos de :hover se renderizan puede variar ligeramente de un navegador a otro, especialmente en versiones más antiguas o menos comunes. Es una buena práctica probar sus efectos  en diferentes navegadores para asegurar una experiencia de usuario coherente y accesible. Si quieres saber más acerca de las pseudoclases y los pseudoelementos,  te recomendamos nuestro artículo: CSS: Interactividad y estilo con pseudo-clases y pseudo-elementos