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

Question

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

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

Answer 1

是的，你绝对可以这样做：

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

这使用

:hover

伪类 来限制与

.parent

匹配且悬停的元素，并使用 后代组合器（空格）来选择与

.child

匹配的任何后代。

这是一个活生生的例子：

.parent {
  border: 1px dashed gray;
  padding: 0.5em;
  display: inline-block;
}

.child {
  border: 1px solid brown;
  margin: 1em;
  padding: 0.5em;
  transition: all 0.5s;
}

.parent:hover .child {
  background: #cef;
  transform: scale(1.5) rotate(3deg);
  border: 5px inset brown;
}

<div class="parent">
  parent
  <div class="child">
    child
  </div>
</div>

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 * {
   /* ... */
}

Answer 4

虽然接受的解决方案是正确的，但悬停样式将应用于

parent

和

child

元素。这是因为父级将子级包含在其“盒子”内。

如果有人出于某种原因好奇如何仅在父元素悬停时将样式应用于子元素，请尝试以下操作：

.parent {
    height: 100px;
    width: 100px;

    background-color: blue;
}

.parent:hover .child {
    background-color: red;
}

.child {
    height: 100px;
    width: 100px;
    margin-left: 100px;

    background-color: green;
    pointer-events: none; /* this line does the trick */
}

<div class="parent">
    <div class="child"></div>
</div>