Style child element when hover on parent

Question

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 when there is an hover on the panel.

Looking to support all major browsers.

Answer 1

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

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

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

Answer 2

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>