Html 铬合金中带有负translateZ的悬停元素

我正在使用以下标记

<div class="container">
    <div class="item1"></div>
    <div class="item2"></div>
</div>

当悬停某个项目时，悬停的元素变成主体，而不是容器。为什么

---

使用此CSS，当您将

鼠标悬停在
项1
或
项2
上时，它将更改它们的背景

.container{
 position: relative;
 width: 250px;
 height: 250px;
 perspective: 800px;
 transform-style: preserve-3d;
 background: rgba(255, 255, 0, 0.2);
}
.item1:hover, .item2:hover{
 background: rgba(255, 255, 0, 0.6);
}
.container div{
 position: absolute;
 width: 200px;
 height: 100px;
}
.item1{
 background: orange;
 transform: translate3d(0, 0, -100px);
}
.item2{
 background: teal;
 transform: translate3d(50px, 50px, -200px);
}

Fiddle Link
在firefox中，当你悬停一个项目时，容器bg会发生变化。那么@web tiki怎么样，有点黑，这个更好。但是我试着在没有额外包装的情况下制作这个。有趣的事情-如果将position absolute设置为container，它会像我预期的那样工作，但是高度100%到body，html元素再次破坏它。悬停的元素仍然是body。你的意思是当你悬停
item1
或
item2
时，那么
container
背景应该改变吗@在这种情况下，您必须使用“jQuery”或
javascript
@萨科宁
.container{
 position: relative;
 width: 250px;
 height: 250px;
 perspective: 800px;
 transform-style: preserve-3d;
 background: rgba(255, 255, 0, 0.2);
}
.item1:hover, .item2:hover{
 background: rgba(255, 255, 0, 0.6);
}
.container div{
 position: absolute;
 width: 200px;
 height: 100px;
}
.item1{
 background: orange;
 transform: translate3d(0, 0, -100px);
}
.item2{
 background: teal;
 transform: translate3d(50px, 50px, -200px);
}