将鼠标悬停在另一个上时显示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;
}

这将允许您将一个放在另一个上面。你应该看到一个时髦的蓝色，因为我添加了不透明度以显示效果。