Estilo del elemento secundario cuando se pasa el mouse sobre el elemento primario

155

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

Buscando apoyar a todos los principales navegadores.

css css-selectors Rajat Gupta
fuente

Respuestas:

273

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

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

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

jtbandes
fuente
8
Gracias, me has ayudado a hacer que mi página web cobre vida con CSS3.
Nick Taras
1
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 los necesita .parent:hover > .child.
William T. Mallard
8

Sí, puede hacer esto usando 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>
Expandir fragmento

Iqbal Pasha
fuente
10
Muy tarde para la fiesta
Dherya
44
Esta respuesta se beneficiaría de alguna explicación. Me parece que aquí hay más código del que debe haber y no está claro en qué parte del código deberíamos centrarnos.
Paul Rooney
0

puedes usar esto también

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

m Qmarsi
fuente
¿Puedes explicar un poco más tu respuesta?
Massimo hace