CSS - 让 div 1 在 div 2 悬停时消失 [重复]答案

【问题标题】：SCSS - Make div1 disappear on hover of div2 [duplicate]CSS - 让 div 1 在 div 2 悬停时消失 [重复]
【发布时间】：2017-11-27 03:51:01
【问题描述】：

我希望一个 div 在悬停在不同的 div 上时消失，纯粹使用 CSS。所以我有两个div

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

还有我的 SCSS：

#target {
  background-color: blue;
  height: 100px;
  width: 100px;
}

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

    &:hover #target{
      display: none !important;
      /* background-color: green !important; */
    }
}

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

https://jsfiddle.net/ubLLga3q/3/

【问题讨论】：

标签： javascript jquery html css sass

【解决方案1】：

问题在于您的 HTML 标记。您正在悬停并说#target消失。如果您调用兄弟姐妹/孩子，则只能使用此方法。现在 #target 不是 .hover_box 的子节点。

<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;
}

https://jsfiddle.net/ubLLga3q/6/

【讨论】：