CSS展开，隐藏悬停内容

Question

容器div包含浮动的左框（大小相同），因此它看起来像网格。一个框具有可见内容和隐藏的内容。我想鼠标悬停，看到扩展的隐藏内容，使其保持在任何其他框的顶部。

除了最后一部分，我几乎让它工作了 - 即使应用了z-index，隐藏内容也不会保持最佳状态。

以下是示例：http://jsfiddle.net/ZQ63X/

Answer 1

你需要css是这样的;

.item .item-1, .item .item-2{
    position:absolute;
    background-color:white;
}
.item .item-2{
    display:none;
}
.item:hover .item-2{display:block;}

希望我能帮助

/ edit - ＆gt;这样你甚至不需要javascript ..

Answer 2

更改.item .item-2的样式，如下所示。

.item .item-2{
    display:none;
    position:absolute;
    top:0px;
}

<强> Demo

Answer 3

我在显示时为隐藏元素添加了背景颜色和z-index ......这就是你的意思吗？

http://jsfiddle.net/kmacey1249/ZQ63X/3/