Aplicar estilo al elemento secundario cuando se coloca el cursor sobre el elemento primario

Cómo cambiar el estilo del elemento secundario cuando se desplaza el cursor sobre el elemento principal. Preferiría una solución CSS para esto si es posible. ¿Hay alguna solución posible a través de: desplazar los selectores de CSS? En realidad, necesito cambiar el color de la barra de opciones dentro de un panel cuando hay un desplazamiento sobre el panel.

Buscando ser compatible con los principales navegadores.

preguntado el 27 de agosto de 11 a las 20:08

3 Respuestas

Sí, definitivamente puedes hacer esto. Solo usa algo como

.parent:hover .child {
   /* ... */
}

Según consulta en esta página es compatible con los principales navegadores.

Respondido 16 Feb 16, 08:02

Finalmente aprendí suficiente CSS para saber qué pedir, ¡gracias por la ayuda! Tenga en cuenta que esto se aplica a todos los descendientes, si solo quiere hijos, creo que necesita .parent:hover > .child? - William T. Mallard

No es un trabajo cuando alguna clase ya se aplicó al niño. - Bhadresh Patel

Sí, puede hacer esto, use el siguiente código que puede ayudarlo.

.parentDiv{
margin : 25px;

}
.parentDiv span{
  display : block;
  padding : 10px;
  text-align : center;
  border: 5px solid #000;
  margin : 5px;
}

.parentDiv div{
padding:30px;
border: 10px solid green;
display : inline-block;
align : cente;
}

.parentDiv:hover{
  cursor: pointer;
}

.parentDiv:hover .childDiv1{
border: 10px solid red;
}

.parentDiv:hover .childDiv2{
border: 10px solid yellow;
} 
.parentDiv:hover .childDiv3{
border: 10px solid orange;
}
<div class="parentDiv">
<span>Hover me to change Child Div colors</span>
  <div class="childDiv1">
    First Div Child
  </div>
  <div class="childDiv2">
    Second Div Child
  </div>
  <div class="childDiv3">
    Third Div Child
  </div>
  <div class="childDiv4">
    Fourth Div Child
  </div>
</div>

Respondido 16 Feb 16, 09:02

Esta respuesta se beneficiaría de alguna explicación. Me parece que hay más código aquí del necesario y no está claro en qué parte del código deberíamos enfocarnos. - Paul Rooney

también puedes usar esto

.parent:hover * {
   /* ... */
}

Respondido 25 Jul 20, 10:07

¿Puedes explicar un poco más tu respuesta? - Massimo Petrus

@MassimoPetrus puso el nombre del niño donde el * no está seguro de si funciona para archivos svg, pero para infline svg funciona bien. También puede profundizar tantos niños colocando un espacio y luego el nombre del siguiente niño: problema bajo

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.