Question

我有2个具有以下类名的div：“red”和“green” 绿色div隐藏，但当鼠标悬停在红色div上时，绿色div出现。但是，绿色div出现在红色前面。我想颠倒顺序，这样当悬停在红色div上时，绿色的一个出现在它下面，即我希望红色div与绿色div重叠（我不想简单地想要两个div之间的空格，我想要红色div超过绿色）。我实际上想在红色div中包含一个背景PNG，这样当绿色div显示时它实际上位于PNG下面。

绿色div嵌套在红色div中，我的CSS如下：

.green{
    display: none;
}

.red:hover .green{
    display: block;
}

Answer 1

您可以使用z-index

更改图层的顺序

如果你总是希望红色亮起来并且没有放上一些文字就可以这样：

z-index:9999;

如果您想了解更多信息，请使用本教程：z-index

Answer 2

我看不到你如何将鼠标悬停在红色div上，因为它嵌套在绿色div中并且隐藏了一个，因此红色div也应该被隐藏。

但我改变了一些事情。我使用position，z-index并将绿色嵌套在红色div中。

HTML

<div class="red">
    <div class="green">
    </div>
</div>

CSS

.green {
    display: none;
    background: green;
    width: 310px;
    height: 310px;
    margin-left: -5px;
    position: relative;
    z-index: -1;
}
.red {
    background: red;
    width: 300px;
    height: 300px;
    margin: 5px;
}
.red:hover .green {
    display: block;
}

我将绿色div的大小设置得更大，并增加了一些余量，以便可见。

这是一个实例http://jsfiddle.net/PaulvdDool/FpsuA/

Answer 3

<强> HTML

<div class="wrapper">
    <div class="red"></div>
    <div class="green"></div>
</div>

<强> CSS

.wrapper {
    position: relative;
     height: 50px;
     width: 50px;
}
.red {
    top:0;
    left: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color:#d42046;
    z-index:2;
}
.green {
    top: 0;
    left: 0;
    position: absolute;
    display: none;
    height: 60px;
    width: 60px;
    background: #1cc477;
    z-index:1;
}
.wrapper:hover .green {
    display: block;  
}

<强>样本：

jsFiddle

如何更改div的图层顺序

3 个答案: