css - 如何在父元素悬停时更改子元素的背景？

Question

我有下一个 html 结构:

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

和CSS:

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

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

.child {
    width: 50px;
    height: 50px;
}

当父 div 悬停时，如何更改子 div 的背景颜色？我可以使用 css 还是应该使用 JQuery？

Answer 1

给你一个解决方案

.parent {
  background-color: green;
  width: 100px;
  height: 100px;
}

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

.child {
  width: 50px;
  height: 50px;
}

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

希望对您有所帮助。