presionado - selectores css

Elemento hijo de estilo cuando se coloca el cursor 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 puedes hacer esto. Solo usa algo como

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

Según esta página , es compatible con todos los principales navegadores.

Answer 2

Sí, puedes hacer esto, usa este código a continuación, puede ayudarte.

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