CSS 悬停在父元素上时为子元素设置样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7217244/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Style child element when hover on parent
提问by Rajat Gupta
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.
如何在父元素上悬停时更改子元素的样式。如果可能的话，我更喜欢一个 CSS 解决方案。有没有可能通过 :hover CSS 选择器的解决方案。实际上，当面板上有悬停时，我需要更改面板内选项栏的颜色。
Looking to support all major browsers.
希望支持所有主要浏览器。
回答by jtbandes
回答by Iqbal Pasha
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>