CSS для расширения, скрытия содержимого при наведении

Question

Контейнерный элемент содержит плавающие левые блоки (одинакового размера), поэтому он выглядит как сетка. Один ящик имеет видимый контент и скрытый. Я хочу навести курсор мыши и увидеть скрытый контент, развернутый так, чтобы он оставался поверх любого другого поля.

Я почти все заработал, за исключением последней части - скрытый контент не остается на вершине даже при применении 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 -> таким образом, вам даже не нужен javascript ..

Answer 2

Я добавил цвет фона и z-index для скрытых элементов при открытии ... Это то, что вы имеете в виду?

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

Answer 3

Измените стили для .item .item-2, как показано ниже.

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

Демо