Style child element when hover on parent

How to change the style of child element when there is hover on parent element. I would prefer a CSS solution for this if possible. Is there any solution possible through :hover CSS selectors. Actually I need to change color of options bar inside a panel wh开发者_JAVA百科en there is an hover on the panel.

Looking to support all major browsers.

---

Yes, you can definitely do this. Just use something like

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

According to this page it's supported by all major browsers.

---

Yes, you can do this use this below code it may help you.

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

---

you can use this too

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

---

While the accepted solution is correct, the hover styles are being applied to both the parent and child element. This is because the parent contains the child inside its "box".

If anyone, for whatever reason, is curious about how to apply styles to a child element only when the parent is hovered, try this:

.parent {
    height: 100px;
    width: 100px;

    background-color: blue;
}

.parent:hover .child {
    background-color: red;
}

.child {
    height: 100px;
    width: 100px;
    margin-left: 100px;

    background-color: green;
    pointer-events: none; /* this line does the trick */
}

<div class="parent">
    <div class="child"></div>
</div>