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!