Cuando trabajas con estilos CSS, es bastante habitual que quieras modificar un elemento cuando el usuario pasa el cursor sobre otro elemento diferente, algo que puedes conseguir combinando :hover con los selectores adecuados.
CSS permite crear este tipo de interacciones sin necesidad de utilizar JavaScript, siempre que exista una relación concreta entre los elementos dentro del HTML.
En este tutorial vas a aprender cómo seleccionar un elemento al hacer hover sobre otro con CSS, qué combinadores puedes utilizar y cuáles son las limitaciones que debes tener presentes.
¿Qué hace la pseudoclase :hover en CSS? 🖱️
La pseudoclase :hover detecta cuándo el usuario coloca el puntero sobre un elemento, permitiéndote cambiar temporalmente sus propiedades CSS.
El ejemplo más sencillo consiste en cambiar el color del propio elemento sobre el que estás colocando el cursor.
.boton:hover {
background-color: black;
color: white;
}
En este caso estás seleccionando exactamente el mismo elemento que recibe el hover, por lo que el funcionamiento resulta bastante directo.
Puedes consultar más detalles sobre esta pseudoclase en la documentación de :hover de MDN.
La situación se vuelve más interesante cuando quieres que el hover realizado sobre un elemento provoque cambios visuales sobre otro elemento diferente.
Cómo seleccionar un hijo al hacer hover sobre su elemento padre 👇
Uno de los casos más habituales consiste en modificar un elemento hijo cuando haces hover sobre su contenedor padre.
Imagina que tienes la siguiente estructura HTML.
<div class="tarjeta">
<h3>Mi tarjeta</h3>
<p class="descripcion">Texto de ejemplo</p>
</div>
Si quieres cambiar el color del texto .descripcion al pasar el ratón sobre .tarjeta, puedes utilizar este CSS.
.tarjeta:hover .descripcion {
color: red;
}
El navegador interpreta este selector como “cuando exista hover sobre .tarjeta, selecciona .descripcion que se encuentre dentro de ella”.
Este sistema funciona aunque el elemento seleccionado no sea un hijo directo, ya que el espacio representa el combinador de descendientes.
Seleccionar un hijo directo con CSS 🎯
Si solamente quieres modificar un elemento que sea hijo directo del elemento sobre el que haces hover, puedes utilizar el combinador >.
.contenedor:hover > .elemento {
opacity: 1;
}
Este selector evitará afectar a elementos con la clase .elemento que estén situados en niveles inferiores de la estructura HTML.
Puedes aprender más sobre estas relaciones entre elementos consultando los combinadores CSS explicados por MDN.
Seleccionar el elemento hermano siguiente al hacer hover ➡️
CSS también permite seleccionar el hermano situado inmediatamente después de otro elemento mediante el combinador +.
Puedes partir, por ejemplo, de este HTML.
<div class="boton">Pasa el ratón</div>
<div class="mensaje">¡Hola!</div>
Para mostrar .mensaje cuando haces hover sobre .boton, podrías utilizar el siguiente código.
.mensaje {
opacity: 0;
}
.boton:hover + .mensaje {
opacity: 1;
}
El símbolo + significa que .mensaje debe aparecer inmediatamente después de .boton y ambos deben compartir el mismo elemento padre.
Esta técnica resulta especialmente práctica para crear mensajes informativos, pequeñas ayudas visuales, etiquetas y efectos interactivos.
Seleccionar varios hermanos posteriores con CSS ✨
En algunas situaciones no quieres modificar únicamente el elemento inmediatamente posterior, sino cualquier hermano situado después del elemento que recibe el hover.
Para conseguirlo puedes utilizar el combinador general de hermanos ~.
<div class="activador">Pasa el ratón</div>
<div class="elemento">Elemento 1</div>
<div class="elemento">Elemento 2</div>
<div class="elemento">Elemento 3</div>
El CSS podría ser el siguiente.
.activador:hover ~ .elemento {
color: blue;
}
Cuando coloques el cursor sobre .activador, todos los elementos posteriores con la clase .elemento podrán recibir el estilo indicado.
La principal diferencia frente al combinador + es que ~ no exige que el elemento seleccionado aparezca inmediatamente después.
Tabla resumen de selectores CSS
| Selector | Qué selecciona | Ejemplo |
|---|---|---|
.padre:hover .hijo | Cualquier descendiente | .card:hover .texto |
.padre:hover > .hijo | Hijo directo | .menu:hover > .submenu |
.elemento:hover + .hermano | Hermano inmediatamente posterior | .boton:hover + .mensaje |
.elemento:hover ~ .hermano | Hermanos posteriores | .titulo:hover ~ p |
.padre:has(.hijo:hover) | Un padre relacionado con el elemento | .card:has(img:hover) |
¿Se puede seleccionar un elemento anterior con hover? 🤔
Durante muchos años una de las principales limitaciones de CSS era que los selectores tradicionales funcionaban principalmente avanzando desde un elemento hacia sus descendientes o hermanos posteriores.
Por ejemplo, este HTML presenta un problema clásico.
<div class="primero">Elemento primero</div>
<div class="segundo">Elemento segundo</div>
Con los combinadores tradicionales no puedes utilizar el hover de .segundo para seleccionar directamente .primero, porque .primero aparece antes dentro del documento.
Sin embargo, actualmente dispones de una herramienta extremadamente interesante para solucionar muchos de estos casos.
Usar :has() para seleccionar elementos relacionados 🔥
La pseudoclase funcional :has() permite seleccionar un elemento dependiendo de los elementos que contiene o con los que mantiene determinadas relaciones.
Imagina esta estructura.
<div class="tarjeta">
<img src="imagen.jpg" alt="">
<div class="contenido">
<h3>Título</h3>
</div>
</div>
Puedes cambiar el fondo de toda la tarjeta cuando haces hover sobre la imagen con este código.
.tarjeta:has(img:hover) {
background-color: #eee;
}
La lectura del selector sería aproximadamente “selecciona .tarjeta cuando contenga una imagen que tenga activado :hover”.
Puedes profundizar en esta potente pseudoclase desde la documentación de :has() en MDN.
:has() amplía enormemente las posibilidades de CSS porque permite crear selectores basados en relaciones que anteriormente requerían JavaScript o cambios en la estructura HTML.
Ejemplo práctico para cambiar una imagen al hacer hover sobre un texto 🖼️
Supón que quieres que una imagen aumente ligeramente de tamaño cuando el usuario coloca el cursor sobre un título.
Puedes utilizar esta estructura.
<div class="bloque">
<h2 class="titulo">Descubre nuestro servicio</h2>
<img class="imagen" src="imagen.jpg" alt="Servicio">
</div>
El CSS necesario sería muy sencillo.
.titulo:hover + .imagen {
transform: scale(1.05);
}
Puedes mejorar el efecto añadiendo una transición a la imagen.
.imagen {
transition: transform 0.3s ease;
}
.titulo:hover + .imagen {
transform: scale(1.05);
}
Gracias a transition conseguirás que el cambio de tamaño sea progresivo en lugar de producirse repentinamente.
Cómo crear el efecto paso a paso 🛠️
Si quieres seleccionar correctamente un elemento al hacer hover sobre otro, puedes seguir este procedimiento:
- Identifica el elemento que recibirá el hover y comprueba su clase o identificador dentro del HTML.
- Localiza el elemento que quieres modificar y analiza qué relación mantiene con el elemento anterior.
- Utiliza un espacio cuando el elemento seleccionado sea cualquier descendiente del elemento principal.
- Utiliza
>cuando solamente quieras seleccionar un hijo directo. - Utiliza
+cuando quieras seleccionar el hermano situado inmediatamente después. - Utiliza
~cuando quieras seleccionar uno o varios hermanos posteriores. - Considera utilizar
:has()cuando necesites trabajar con relaciones más complejas o quieras modificar un padre según el estado de alguno de sus hijos. - Añade transiciones CSS cuando el cambio afecte al tamaño, posición, opacidad, color u otras propiedades visuales.
- Comprueba siempre el resultado en diferentes tamaños de pantalla porque los dispositivos táctiles no interactúan con
:hoverexactamente igual que un ordenador de escritorio.
Errores habituales al utilizar hover sobre otro elemento ⚠️
Uno de los errores más frecuentes consiste en intentar seleccionar un elemento completamente independiente dentro del DOM mediante un selector CSS convencional.
CSS necesita que exista alguna relación estructural entre los elementos para poder establecer este tipo de interacción.
También debes comprobar cuidadosamente el orden del HTML cuando utilizas + o ~, porque ambos combinadores trabajan con elementos hermanos situados después del elemento original.
Otro fallo habitual aparece cuando utilizas > pensando que seleccionará cualquier descendiente, cuando realmente solamente afectará a los hijos situados exactamente un nivel por debajo.
También conviene evitar selectores excesivamente largos como .pagina .contenido .seccion .bloque:hover .elemento, ya que pueden aumentar innecesariamente la especificidad de tu CSS y dificultar posteriores modificaciones.
Combinar hover con opacity, transform y transition 🎨
Seleccionar otro elemento con :hover resulta especialmente útil cuando combinas esta técnica con propiedades relacionadas con animaciones y efectos visuales.
Puedes crear, por ejemplo, un texto que aparezca progresivamente cuando haces hover sobre una imagen.
.texto {
opacity: 0;
transform: translateY(10px);
transition: 0.3s ease;
}
.imagen:hover + .texto {
opacity: 1;
transform: translateY(0);
}
Con unas pocas líneas puedes conseguir efectos visuales profesionales sin cargar ninguna biblioteca adicional ni escribir JavaScript.
Conclusión ✅
Saber cómo seleccionar un elemento al hacer hover sobre otro con CSS te permitirá crear interfaces mucho más dinámicas utilizando únicamente unas pocas reglas de estilo.
Los combinadores de descendientes, hijos y hermanos cubren la mayoría de situaciones habituales mediante espacio, >, + y ~.
Cuando necesites trabajar con relaciones más complejas, :has() abre posibilidades que anteriormente eran prácticamente imposibles utilizando únicamente CSS.
Antes de escribir el selector, observa siempre la estructura de tu HTML y determina qué relación existe entre el elemento que recibe el hover y el elemento que quieres modificar.
Si eliges correctamente el combinador, podrás crear menús, tarjetas interactivas, galerías, mensajes emergentes, animaciones y numerosos efectos hover sin necesidad de recurrir a JavaScript.
