別の区切りdivを作成するためにdivを移動する方法

Question

divは、ドロップダウンナビゲーションメニューのように別のdivが上書き/クリックされたときに表示されます。

div（最初は非表示になっています）がdiv内にあるとすれば、それは意味をなさないでしょうか？隠しdivがあるので

<div class="red"><p>button</p></div>  
<div id="separate-div">Text Here</div> 

Fiddle

トップボタンは何もしません：そうのように：そうは次のように隠されたdivは、他のdivの外にあるとき

<div class="red2"> 
    <p>button</p> 
    <div id="inside-div">Text Here</div> 
</div> 

私はそれが仕事をしたいです私はちょうどコードをコピーして貼り付けたにもかかわらず、ボトムボタンが動作する場所の外側にあります。

思考？

Answer 1

は、あなたが探していることはadjacent sibling selector+であるか、また、隣接する1未満厳しいgeneral sibling selector~を使用することができます。

.red { 
 
    display: inline-block; 
 
    position: relative; 
 
    background-color: #ee9094; 
 
    width: 7.5em; 
 
    min-height: 7.5em; 
 
    text-align: center; 
 
    color: #fff; 
 
    line-height: 75px; 
 
    transition: background-color 0.2s ease; 
 
} 
 
#separate-div { 
 
    display: none; 
 
    position: relative; 
 
    float: right; 
 
    background-color: #D9D9D9; 
 
    max-width: 20em; 
 
    font-size: 1.6em; 
 
} 
 
.adjacent .red:hover + #separate-div { 
 
    display: inline-block; 
 
} 
 
.sibling .red:hover ~ #separate-div { 
 
    display: inline-block; 
 
}

<div class="adjacent"> 
 
    <div class="red"> 
 
    <p>button</p> 
 
    </div> 
 
    <div id="separate-div">Text Here</div> 
 
</div> 
 
<hr /> 
 
<div class="sibling"> 
 
    <div class="red"> 
 
    <p>button</p> 
 
    </div> 
 
    <div>Some random text here</div> 
 
    <div id="separate-div">Text Here</div> 
 
</div>