異なるコンテナからのdivのホバープロパティーが機能しない

Question

私は2つの異なるボックスを持っています。

私は同じコンテナ内に両方のボックスを持っている場合は、ここに私の snippet here. に私のHTMLとCSS見ることができるようにそれが動作することを考え出し

：

.first { 
 
    color: blue; 
 
    background: black; 
 
    width: 299px; 
 
} 
 
.first:hover + .second { 
 
    background: red; 
 
    color: white; 
 
} 
 
.second { 
 
    color: red; 
 
    background: black; 
 
    width: 300px; 
 
    margin-left: 10px; 
 
} 
 
.container { 
 
    display: flex; 
 
}

<div class="container"> 
 
    <div class="first"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam delectus quo corporis, n 
 
    </div> 
 
    <div class="second"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing e et magnam rem, doloribus libero quas numquam esse in culpa! 
 
    </div> 
 
</div>

しかし、私はどのように行うことができますがボックスが同じコンテナにない場合は同じことをしますか？

ありがとうございます。

Answer 1

display: inline-blockを使用するとコンテナの使用を取り除くことができますが、コンテナクラスにdisplay: flexを使用しているため、子アイテム（1番目と2番目のdiv）の高さを満たすように伸びることはありませんコンテナ固定された高さを使用して、それらを同じ高さに保つことができます。

.first{ 
 
    color: blue; 
 
    background: black; 
 
    width: 299px; 
 

 
    display: inline-block; 
 
} 
 
.first:hover + .second { 
 
    background: red; 
 
    color: white; 
 
} 
 
.second{ 
 
    color: red; 
 
    display: inline-block; 
 
    background: black; 
 
    width: 300px; 
 
    margin-left: 10px; 
 
}

<div class="first"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam delectus quo corporis, n 
 
    </div> 
 
    <div class="second"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing e et magnam rem, doloribus libero quas numquam esse in culpa! 
 
    </div>

Answer 2

（ポスト編集した）

利用のjQuery：背景色で新しいクラスを作成し、それはjQueryを使って追加し、あなたのマウスは、div要素を去ったときに削除されます。

コード：（jqueryのを追加することを忘れないでください）この

$('div.one').hover(function(){ 
    $('div.two').toggleClass('three'); 
}); 

チェック： https://jsfiddle.net/wnszbhj3/1/