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定位到亲戚身上，并为其提供比#cubeHolder更高的z指数

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

CSS徘徊在保证金之后

2 个答案: