Moloco Moloco - 1 month ago 5
CSS Question

Sidebar that appears when i hover it

I would like to make my sidebar appear when i am overlapping it. I've tried that using css but it didn't work. How can i make it work?

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;
}


Thank you in advanced!

Answer

Change .bar-open visibility to visible

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

JSFIDDLE