Question

当我重叠时，我想让我的侧边栏出现。我尝试过使用css，但它没有用。我怎样才能使它发挥作用？

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代码：

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

先谢谢你了！

Answer 1

将您的选择器更改为此。 +符号选择兄弟。

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

Answer 2

将.bar-open可见性更改为可见

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

JSFIDDLE

我悬停它时出现的侧边栏

2 个答案: