悬停在另一个容器上时显示 DIV 容器

Question

将鼠标悬停在可见 div 容器上后，我无法正确显示隐藏的 div 容器。

当 d1 悬停在 d2 上时会出现，但会出现某种闪烁。这是我所拥有的：

注意：我仍然希望 d1 可见，因为我想使用 d2 在 d1 上显示文本

http://jsfiddle.net/3ey778vc/

css：

.website{
    width:400px; height:400px; background: black;
}

.website .d1, .website .d2{
    width:100%; height:100%; float:left; 
}

.d1{
    background:red;
    width:100%; height:100%; float:left
}

.d2{
    background:blue;
    margin-top:-400px; display:none;                z-index:100;
}

.d1:hover + .d2 {
    display: block;
}

html：

<div class='website'>
    <div class='d1'></div>
    <div class='d2'></div>
</div>

Answer 1

.website {
    width:400px; height:400px; background: black;position:relative;
}                   
.website .d1, .website .d2 {
    left:0px;top:0px;width:100%; height:100%;
}
.d1 {
    background:red;
    width:100%; height:100%; z-index:0;position:relative;
}
.d2 {
    background:blue;
    display:none;               
    z-index:100;
    opacity:.5;
   position:absolute;
}

.website:hover .d2 {
    display: block;
}

这将允许您将一个放在另一个之上。由于我添加了不透明度来显示效果，您应该会看到时髦的蓝色。