Sidebar, die erscheint, wenn ich sie schwebe

Question

Ich möchte meine Sidebar erscheinen lassen, wenn ich es überlappe. Ich habe das mit CSS versucht, aber es hat nicht funktioniert. Wie kann ich es funktionieren lassen?

HTML-Code:

<div class="body"> 
    <div class="container"> 
    </div> 
    <div class="bar-open"> 
    <div class="bar" id="bar"> 
     <br> 
     <br> 
     <br> 
     <h1>Hola</h1> 
    </div> 
    </div> 
</div> 

CSS CODE:

.bar-open { 
    position:absolute; 
    float: left; 
    width: 0.5%; 
    height: 100%; 
    visibility: hidden; 
} 
.bar { 
    color: white; 
    position:absolute; 
    float: left; 
    background-color: #F89406; 
    width: 12%; 
    height: 100%; 
    display: none; 
} 
.bar-open:hover .bar { 
    display: block; 
    visibility: visible; 
} 

Vielen Dank im fortgeschrittenen!

Answer 1

ändern .bar offene Sichtbarkeit sichtbar

.bar-open { 
    position:absolute; 
    float: left; 
    width: 0.5%; 
    height: 100%; 
    visibility: visible; 
} 

JSFIDDLE

Answer 2

Ändern Sie den Selektor zu diesem. Das + Zeichen wählt das Geschwister aus.

.bar-open { 
    float: left; 
    width: 0.5%; 
    height: 100%; 
} 
.bar { 
    color: white; 
    float: left; 
    background-color: #F89406; 
    width: 12%; 
    height: 100%; 
    display: none; 
} 
.bar-open:hover+.bar { 
    display: block; 
}