将鼠标悬停在父div上时，更改所有子div的颜色以及父背景颜色

Question

我需要在父div悬停时更改按钮颜色和文本颜色。

我正在获取输出，并且在悬停时必须更改颜色。

您能帮我吗？

.Set {
  background-color: #fff;
  padding: 35px;
  box-sizing: border-box;
  min-height: 450px;
  z-index: 2;
  position: relative;
  width: 300px;
  border: 1px solid #ccc;
}

.btn {
  padding: 10px 30px;
  font-size: 16px;
}

.btn_bg {
  background-color: #000;
  color: #fff;
}

.Set:hover {
  background-color: #000;
}

<div class="Set">
  <h2 class="textMe">adasdsad asdas d</h2>
  <div class="bigtextMe">
    <p>asdsa asdsd asd asd sd sd sd </p>
    <a href="" class="btn btn_bg">njkndkajnsdkja</a>
  </div>

Answer 1

使用后代运算符访问标签

.Set:hover >.bigtextMe > .btn_bg{}

.Set {
  background-color: #fff;
  padding: 35px;
  box-sizing: border-box;
  min-height: 450px;
  z-index: 2;
  position: relative;
  width: 300px;
  border: 1px solid #ccc;
}

.btn {
  padding: 10px 30px;
  font-size: 16px;
}

.btn_bg {
  background-color: #000;
  color: #fff;
}

.Set:hover {
  background-color: #000;
  color:white
}
.Set:hover >.bigtextMe > .btn_bg{
  background-color: white;
  color:black
}

<div class="Set">
  <h2 class="textMe">adasdsad asdas d</h2>
  <div class="bigtextMe">
    <p>asdsa asdsd asd asd sd sd sd </p>
    <a href="" class="btn btn_bg">njkndkajnsdkja</a>
  </div>