SCSS - div2のホバー上でdiv1を消すようにする

Question

divで別のdivにカーソルを置くとdivが消えてしまいます。 だから、私は2つの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は.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/