将div放在另一个div后面

时间:2013-10-30 13:35:38

标签: css html hover containers

想象一下这种结构:

<div class="background">
  <div class="object"></div>
</div>
<div class="foreground"></div>

我的foreground完全覆盖了我background 在我的CSS中我想在悬停时更改对象属性(即.object:hover{}) 有没有办法在CSS中执行此操作而不在object内移动foreground或使用js?

更新:问我的CSS。

.background { background:url('background.svg') no-repeat; }
.foreground { background:url('foreground.svg') no-repeat 50% 50%; }
.object {
 position: absolute;
 top:10px;
 left:10px;
 opacity:1;
}

.object:hover 
{
  opacity:0.5;
}

2 个答案:

答案 0 :(得分:4)

答案很简单。您可以使用兄弟选择器(+),但必须恢复div的顺序。

示例CSS:

.background {
    position: absolute;
    width: 600px;
    height: 400px;
    background-color: red;
}

.foreground {
    position: absolute;
    width: 300px;
    height: 200px;
    left: 150px;
    top: 100px;
    background-color: green;
    z-index: 1;
}

.object {
    width: 600px;
    height: 400px;
}

.foreground:hover + .background .object {
    background-color: blue;
}

和HTML:

<div class="foreground"></div>
<div class="background">
    <div class="object"></div>
</div>

工作样本:http://jsfiddle.net/pBYwT/1/

答案 1 :(得分:-2)

div的更高z-index:你要在顶部显示的悬停。