Question

HTML：

<div class="container">
  <div class="parent">one
    <div class="child">two</div>
  </div>
</div>

CSS：

.parent {
  background: red;
  height: 200px;
  width: 200px;
}
.child {
  background: green;
  height: 100px;
  width: 100px;
  margin-top: 50px;
  margin-left: 50px;
}
/* insted of apply individual */
/* .parent:hover {
     background: blue;
} 
  .child:hover {
    background: black;
  } 
*/

我想更改父和子背景颜色。当悬停在父级（父级背景：蓝色，子级背景：黑色）上时。这里的问题是父母和孩子有相同的属性（背景），但都有不同的背景颜色。我怎样才能同时应用它们？

Answer 1

您可以使用以下方法更改子悬停颜色：.parent:hover .child

.parent {
  background: red;
  height: 200px;
  width: 200px;
}
.child {
  background: green;
  height: 100px;
  width: 100px;
  margin-top: 50px;
  margin-left: 50px;
}
/* insted of apply individual */
 .parent:hover {
  background: blue;
} 
.parent:hover .child {
  background: black;
}

<div class="container">
  <div class="parent">one
    <div class="child">two</div>
  </div>
</div>

CSS 悬停效果：同时更改父子背景颜色

1 个答案: