SCSS - Make div1 disappear on hover of div2

Question

I want a div to disappear on hover over a different div, purely with CSS. So I have two divs

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

and my 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; */
    }
}

However, it does not work. See here:

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

score 1 · Accepted Answer · answered Jun 23 '17 at 14:22

The problem is your HTML mark up. You are doing a hover and saying #target disappear. You can only use this method if you call a sibling/child. Right now #target is not a child from .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 - Make div1 disappear on hover of div2

1 Answers1