Javascript SCSS-使div1在div2悬停时消失

我希望一个div在悬停在另一个div上时消失，完全使用CSS。 所以我有两个div

<div class="" id="target">I will disappear</div>
<div class="hover_box">Hover me</div>

但是，它不起作用。请看这里：

---

问题是你的HTML标记。你在做悬停，说目标消失了。只有在调用同级/子级时才能使用此方法。现在目标不是.hover_框中的子对象

<div class="box">
  Hover me
   <div class="hover_box">

  </div>
</div>

.box {
  background-color: blue;
  height: 100px;
  width: 100px;
}

.hover_box {
  background-color: red;
  height: 100px;
  width: 100px;
}

.box:hover .hover_box {
  display: none;
}

<div class="box">
  Hover me
   <div class="hover_box">

  </div>
</div>

.box {
  background-color: blue;
  height: 100px;
  width: 100px;
}

.hover_box {
  background-color: red;
  height: 100px;
  width: 100px;
}

.box:hover .hover_box {
  display: none;
}