当父元素上有悬停时，如何改变子元素的样式。如果可能的话，我更喜欢CSS解决方案。有任何解决方案可能通过:悬停CSS选择器。实际上，当面板上有悬停时，我需要改变面板内选项栏的颜色。
寻求支持所有主要浏览器。
是的，你可以这样做，使用下面的代码，它可能会帮助你。
.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>
虽然接受的解决方案是正确的，但hover样式同时应用于父元素和子元素。这是因为父进程在它的“盒子”中包含了子进程。
如果有人，不管出于什么原因，对如何仅在父元素悬停时才将样式应用于子元素感到好奇，请尝试以下方法:
.parent { 身高:100 px; 宽度:100 px; 背景颜色:蓝色; ｝ .parent:hover .child { 背景颜色:红色; ｝ .child { 身高:100 px; 宽度:100 px; margin-left: 100 px; 背景颜色:绿色; pointer-events:没有;/*这一行完成了*/ ｝ < div class = "父" > < div class = "孩子" > < / div > < / div >
