12

Tengo dos elementos div, lo que quiero conseguir es que al pasar con el ratón sobre el primer elemento se cambie el color del segundo, y al pasar sobre el segundo se cambie el color del primero. No se si se puede hacer con pseudo clases.

Este es el código que tengo

#div1
{
  position: absolute;
  top: 10px;
  left: 10px;
}

#div1:hover
{
  color: red;
}

#div2
{
  position: absolute;
  top: 30px;
  left: 10px;
}
<body>

  <div id="div1">Div número 1</div>
  <div id="div2">Div número 2</div>

</body>

¿Se puede indicar de alguna manera con CSS que al pasar sobre el div número 1 se cambie el color del div número 2 o viceversa?

2
  • 3
    Puedes hacer que al pasar sobre el primero cambie el segundo (#div1:hover + #div2) pero no al revés. Nunca puedes ir hacia atrás en el DOM en CSS
    – user7176
    el 23 may. 2019 a las 12:36
  • Creo que con javascript te será mejor. Puedes usar javascript? el 23 may. 2019 a las 12:42

2 respuestas 2

19

Probando, por puro interés académico y cabezonería, me negaba a creer que no hubiese una manera de hacer lo que necesitas. Y a grandes rasgos no existe una manera de seleccionar un elemento anterior en CSS pero se me ocurrió un truquillo para aparentar que lo estás haciendo en este caso en específico.

Envolviendo tus dos <div> con otro, podemos seleccionar el <div> en el que se está haciendo un hover y dentro de este buscar el <div> al que no se le esté haciendo un hover y a ese aplicarle el cambio de color.

#div1 {
  position: absolute;
  top: 10px;
  left: 10px;
}

#div2 {
  position: absolute;
  top: 30px;
  left: 10px;
}

div:hover div:nth-child(1):not(:hover) {
  color: blue;
}

div:hover div:nth-child(2):not(:hover) {
  color: red;
}
<div>
  <div id="div1">Div número 1</div>
  <div id="div2">Div número 2</div>
</div>

4
  • Sí que funciona aunque creo que no puedes modificar los estilos independientemente, es decir, por ejemplo al div1 ponerlo rojo y al div2 ponerlo azul. Buena respuesta
    – David
    el 23 may. 2019 a las 13:51
  • @David Podrías, he editado la respuesta para que se vea.
    – phpMyGuel
    el 23 may. 2019 a las 13:55
  • Ahora si que has conseguido la respuesta perfecta para la pregunta, enhorabuena
    – David
    el 23 may. 2019 a las 13:57
  • genial!!!! mil gracias!!! el 28 may. 2021 a las 14:02
5

Respuesta corta: No se puede ya que al estar al mismo nivel y declarar la propiedad hover en un div solo puedes aplicar estilos a lo que se sitúe en un nivel inferior a dicho div

Respuesta extendida: Puedes hacerlo mediante JavaScript asignando una clase a tu div2 al hacer hover en tu div1 y viceversa:

document.getElementById('div1').onmouseover = function(){
  document.getElementById('div2').classList.add('hover');
}
document.getElementById('div1').onmouseout = function(){
  document.getElementById('div2').classList.remove('hover');
}
document.getElementById('div2').onmouseover = function(){
  document.getElementById('div1').classList.add('hover');
}
document.getElementById('div2').onmouseout = function(){
  document.getElementById('div1').classList.remove('hover');
}
#div1.hover{
  color: red;
}
#div2.hover{
  color: blue
}
<div id="div1">Div número 1</div>
<div id="div2">Div número 2</div>

1
  • 5
    Como nota: mejor que mouseover y mouseout, sería usar mouseenter y mouseleave. Si el elemento tiene otro elemento dentro, entonces mouseout se ejecutará cuando se pase por encima de ese elemento interno. Por ejemplo, si uno de los div tiene una image, se lanzará mouseover al pasar el ratón por encima del div y cuando se pase por encima de la imagen, se lanzará mouseout (incluso cuando está dentro del div).
    – Alvaro Montoro
    el 23 may. 2019 a las 14:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.