Question

在某种导航栏上，我有一个div one，就像导航栏上的一个类别，另一个div具有该类别的相关链接。有一个较长的div，具有相同的宽度，作为条形图的背景。我有它，所以通常情况下，div two位于相关div one下方，当您将鼠标悬停在div one上时，div two会突然显示在其右侧。然后，当您将鼠标从任一div移开时，div two会回到div one下方。

我需要解决的问题是，我需要将长背景div保留在div one之下，并且在div two之上，因此div two会被隐藏，直到它从背景div下方滑出，并在相关div one的右侧滑出。

我尝试过使用z-index，但似乎没有效果。如果我移动元素的顺序，它就会混淆它。

编辑：这是jsfiddle- http://jsfiddle.net/FEKfK/的链接，我在div上添加了背景颜色，以便于查看。

我需要做的是，将黑色背景栏放在红色条上，移动的那个，还有蓝色的div留在上面。这样，红色栏就会被隐藏，直到你将鼠标悬停在div上。

我在HTML中的含义：

<div id="behind"></div>
<div id="one"><p id="group">Group 1</p>
    <div id="two">
        <ol>
            <li><a href="example.html">Link 1</a></li>
            <li><a href="example.html">Link 2</a></li>
            <li><a href="example.html">Link 3</a></li>
        </ol>
    </div>
</div>

在CSS中：

#one {
    position:relative;
    width:100px;
    height:30px;
    top:10px;
    line-height:27px;
    display:absolute;
    margin:15px 0 0 10px;
    text-align:center;
    z-index:3;
}

#two {
    width:120px;
    height:100;
    overflow:hidden;
    display:inherit;
    line-height:20px;
    position:absolute;
    -webkit-transition:all .5s ease; 
    -moz-transition:all .5s ease; 
    transition:all .5s ease;
    z-index:1;
}

#one:hover > #two {
    display:block;
    left:105px;
    top:0px;
}

#behind {
    width:115px;
    height:444px;
    margin-top:7px;
    position:absolute;
    z-index:2;
}

如何在两个悬停之间分层一个div？

0 个答案: