Question

在下面的示例中，我将向您展示我现在所拥有的样本，您会注意到当您点击黑匣子时，另一个更大的黑匣子将从我的侧边栏下方弹出！虽然在jsfiddle中很难说，但是在浏览器中它是非常值得注意的，但是在z-index的帮助下我设法让窗口从侧边栏下方正确滑出，但是当你再次点击它以发回盒子时，它超越侧边栏而不是背面。我尝试了一些没有做到这一点的简单事情！请帮帮我！：）

HTML

<div id="sidemenu">
    <div id="regionsContainer">
        <div id="regionsUnitedStates" class="not-open">
        <div id="regionsUnitedStatesTooltip"></div>
        </div>
    </div>
    <div id="regionsUnitedStatesChooseState"></div>
</div>

CSS

#sidemenu {
    width: 60px;
    height: 100%;
    min-width: 60px;
    height: 100vh;
    max-width: 60px;
    background-color: #383D3F;
    background-size: 100% 100%;
    background-attachment: fixed;
    position: absolute;
    left:-60px;
    transition: left ease-in-out 0.5s;
}
#sidemenu.show {
    left: 0;
}
#regionsContainer {
    width: 60px;
    height: 481px;
    min-height: 481px;
    min-width: 60px;
    max-width: 60px;
    max-height: 481px;
    background-color: #383D3F;
    position: relative;
    top: 25%;
    bottom: 25%;
}
#regionsUnitedStates {
    width: 60px;
    height: 60px;
    background: #000;
}
#regionsUnitedStatesTooltip {
    opacity:0;
    background: #555;
    height:60px;
    width:180px;
    left:100px;
    position:absolute;
    transition:all ease-in-out 0.25s;
    top:0;
    visibility:hidden;
}
#regionsUnitedStates.not-open:hover #regionsUnitedStatesTooltip{
    left: 60px;
    opacity:1;
    visibility:visible;
}
#regionsUnitedStatesChooseState{
    position:absolute;
    transition:all ease-in-out 0.25s;
    left: -250px;
    width: 250px;
    height: 100%;
    background: #000;
    top:0;
}
#regionsUnitedStatesChooseState.show {
    left: 60px;
    z-index:-1;
}

的jQuery

$(function() {
    setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});
$(function() {
    $("#regionsUnitedStates").on("click", function() {
        $("#regionsUnitedStatesChooseState").toggleClass("show");
        $("#regionsUnitedStates").toggleClass("not-open");
    });
});

示例：

JSFIDDLE

Answer 1

我已更新您的小提琴http://jsfiddle.net/z35LQ/1/

隐藏regionsUnitedStatesChooseState时，我在CSS中添加了z-index。

你的regionsUnitedStatesChooseState div正在两个方向的侧边菜单上。如果为两个状态添加z-index，它将始终位于侧栏的后面。

如何隐藏另一个元素后面的css转换？

1 个答案: