Elemento hijo de estilo al pasar el mouse sobre el elemento primario

Question

Cómo cambiar el estilo del elemento secundario cuando hay un elemento emergente en el elemento principal. Preferiría una solución de CSS para esto si es posible. ¿Hay alguna solución posible a través de: activa los selectores de CSS. De hecho, necesito cambiar el color de la barra de opciones dentro de un panel cuando hay un elemento estacionario en el panel.

Buscando apoyar a todos los principales navegadores.

Answer 1

Sí, definitivamente puede hacer esto. Sólo tiene que utilizar algo así como

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

Según this page que es compatible con todos los principales navegadores.

Answer 2

Sí, puede hacerlo utilizando este código a continuación que puede serle útil.

.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>