想象一下这种结构:
<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;
}
答案 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>
答案 1 :(得分:-2)
div的更高z-index:你要在顶部显示的悬停。