所以，我有一些代码：jsfiddle.net/XNvzW
彩色块设置在3d场景中，彩色框重叠一点并具有以下z值：10,5,0，-5，-10（框右上角的数字） 。当您将鼠标悬停在某个框上时，颜色会发生变化，您会看到一条消息：将鼠标悬停在＃x.block上。很简单。
现在，有时负z块会起作用（并且在CSS中对鼠标事件做出响应：hover，在JS中用$ .mouseenter（）），有时候它们没有，它们似乎完全不一致为什么。似乎存在某种类型的问题w / TranslateZ属性的负值，W3C甚至在他们如何使用Z的示例中使用负值。我发现的一个相关的 stackoverflow question 似乎没有得到很多讨论或解决问题的答案。
思想？
我应该补充一点，这似乎在Internet Explorer 9.0中运行良好，但在基于WebKit的浏览器中却没有。
找到this bug filed in WebKit（但这不完全是我发生的事情）
答案 0 :(得分：0)
将正向translateZ添加到剪切对象的父级以补偿负值：在这种情况下-webkit-transform: translate3d(0px,0px,10px);为父#stage div。这会转换（z：0）浏览器平面上方的项目，当div相对于浏览器Z平面（body元素）为负时，它会停止点击和悬停事件。这似乎只发生在Chrome和Safari（以及移动版Safari）中。如果你认为身体是最后一个事件处理程序，我不认为它必然是一个错误。
你可以看到这个在行动中：在你的jsfiddle上，如果你只翻译Z #stage到5px，你会看到-5px div现在可以工作，但-10px div仍然没有。