Question

我希望将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/

Answer 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/

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

1 个答案: