javascript - 使用重叠 div 显示附加信息。jQuery

Question

我想在 div 上显示其他内容/文本。看看小提琴：http: //jsfiddle.net/P6JGY/132/。还没有文字。但这不是问题。

我正在使用代码，虽然我可以切换h2/h1类，

$('#container .item.w1.h1').toggle(
    function() {
        $(this).css(
            {"height": "110px", "background": "black"}
        );
    },
    function() {
        $(this).css(
            {"height": "50px", "background": "#CCC"}
        );
    }
);

起初我想要获得的是 `div .item.w1.h1' 来重叠它的下邻居。正如你现在所看到的，它正在低于它的邻居）我怎么解决这个问题。

我正在考虑的更高级的事情是，除了第一件事之外，如何制作角落 'div .item.w1.h1' div，以便在单击时向父容器的中心增长/应用上述描述..

非常感谢！

Answer 1

将 z-index 添加到 css 函数。http://jsfiddle.net/P6JGY/133/

 $('#container .item.w1.h1').toggle(
    function() {
        $(this).css(
            {"height": "110px", "background": "black", 'z-index':'10'}
        );
    },
    function() {
        $(this).css(
            {"height": "50px", "background": "#CCC", 'z-index':'0'}
        );
    }
);