Wie man ein div schweben lässt, um ein anderes getrenntes div zu machen, zeigt

Question

Gegenwärtig arbeitet man daran, einen div erscheinen zu lassen, wenn ein anderer div über/angeklickt wird, wie ein Dropdown-Navigationsmenü.

Ich kann das zur Arbeit bekommen, vorausgesetzt, dass die div (die zunächst versteckt ist) ist innerhalb der div ich schweben über wenn das Sinn macht? Wie so:

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

will ich es arbeiten, wenn die versteckten div außerhalb der anderen div ist, etwa so:

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

Fiddle

Top Schaltfläche tut nichts, weil die versteckten div ist außerhalb davon, wo wie der untere Knopf funktioniert, obwohl ich nur den Code kopiert und eingefügt habe.

Gedanken?

Answer 1

, was Sie suchen, ist die adjacent sibling selector+, oder Sie können auch die general sibling selector~ benutzen, die als die benachbarte ein weniger streng.

.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>