CSS展开,隐藏悬停内容

时间:2012-02-06 22:24:57

标签: javascript jquery html css gridview

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

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

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

3 个答案:

答案 0 :(得分: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 - >这样你甚至不需要javascript ..

答案 1 :(得分:0)

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

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

<强> Demo

答案 2 :(得分:0)

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

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