html - CSS 悬停在边距后面

Question

我在页面中间有一个内容区域，我以它为中心margin: 0 auto; 现在我想在页面上有一个带有几个小立方体的背景效果，当悬停时会改变一些效果。

悬停效果在内容区域下方或上方都可以正常工作，但问题是位于内容中心的边缘似乎会干扰对悬停的识别，因为当悬停在内容区域边缘后面的立方体上时，悬停选择器不起作用。

谢谢你的帮助！

编辑：这里有一个代码示例：http ://cssdeck.com/labs/dl3ojm0g

Answer 1

绝对定位您的内容容器。然后左边：50% 和左边距：-700px/2

#content {
position: absolute;
top: 50px;
left: 50%;
margin-left: -350px;
width: 700px;
height: 300px;
padding: 20px;
background-color: white;
border: 2px solid darkgray;
color: darkgray; }

Answer 2

CSS中的一些小改动，效果很好。

    #content {
        margin: 0 auto;
        position:relative;
        margin-top: 50px;
        width: 700px;
        height: 300px;
        padding: 20px;
        background-color: white;
        border: 2px solid darkgray;
        color: darkgray;
        z-index:2;
    }
    #cubeHolder {
        position: absolute;
        top: 0;
        left: 0;
        z-index:1;
}

只需要定位#content到相对位置并给它一个更高的 z-index 相比#cubeHolder

示例：http: //jsfiddle.net/nwrFa/6/