悬停在父级上时的样式子元素

Question

如何在父元素上悬停时更改子元素的样式。如果可能的话，我更喜欢CSS解决方案。有没有任何可能的解决方案：悬停CSS选择器。实际上，当面板上有悬停时，我需要更改面板内选项栏的颜色。

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

Answer 1

是的，你绝对可以做到这一点。只需使用

之类的东西

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

根据this page，所有主流浏览器都支持它。

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>

Answer 3

您也可以使用

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