哈弗背後另有DIV

Question

一個div想象這種strucure的：

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

我​​完全覆蓋我background 在我的CSS我想懸停改變對象的屬性（即.object:hover{}） 是否有辦法在CSS中執行該操作時，不要將object放在​​之內，要麼使用js？

更新：我的問題。

.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; 
} 

Answer 1

答案是有點。你可以使用兄弟選擇器（+），但是你必須恢復你的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/

Answer 2

您希望顯示在頂部的div：hover的更高z-index。