将鼠标hover在父项上时，可以调整子元素

在父元素上hover时如何更改子元素的样式。 如果可能的话，我更喜欢CSS解决scheme。 是否有任何解决scheme可以通过：hoverCSSselect器。 实际上我需要在面板上hover的时候改变面板里的选项栏的颜色。

希望支持所有主stream浏览器。

Answer 1

是的，你绝对可以做到这一点。 只要使用类似的东西

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

根据这个页面，它受到所有主stream浏览器的支持。

Answer 2

是的，你可以使用下面的代码来做到这一点，它可以帮助你。

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