将鼠标悬停在父元素上时设置子元素样式

155

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

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

css css-selectors

273

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

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

根据此页面，所有主要浏览器均支持该页面。

— 乐队
source

8

谢谢您，您刚刚帮助我使CSS 3成为我的网页。

— 尼克·塔拉斯

1

终于学会了足够的CSS，知道该问什么，谢谢您的帮助！请注意，这适用于所有后代，如果您只想要孩子，我认为您需要.parent:hover > .child吗？

— 威廉·T·马拉德

8

是的，您可以使用下面的代码执行此操作，它可能会对您有所帮助。

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

展开摘要

— 伊克巴尔·帕夏（Iqbal Pasha）
source

10

开派对太晚了

— Dherya '16

4

这个答案将受益于一些解释。在我看来，这里的代码比需要的更多，而且不清楚应该关注代码的哪一部分。

— 保罗·鲁尼