CSS转换影响框的可访问性/鼠标灵敏度

我有一个重新创建的用户界面情况。请看一看

基本上，

框

元素在可见时应始终与所有其他元素重叠（当其父

字段

处于状态时

：hover

。从视觉上看，这似乎工作正常-但尝试在仍处于转换状态的

框

元素上移动鼠标。您会注意到父元素上的

：hover

已过时，导致

框

再次关闭

但是，如果在向下移动鼠标之前（在转换结束前不久或转换完成后）再等待片刻，您将看到

框保持打开状态

我做了修改
z-index
的测试，甚至尝试将
z-index
作为转换的一部分，但没有效果。问题仍然存在

为什么会这样

如何修改CSS定义，使
框
在
打开：使用给定的CSS转换
流体
将
悬停在
字段
上，并且从转换开始的第一刻起就可以完全访问（最前面）

注意事项：

我只需要这个在Chrome中独家工作

在我的实时环境中，我使用了更快的转换，但在本例中，我将转换时间延长了很多，因为它更易于测试

我通过对每个字段元素应用递减的
z-index
解决了这个问题，但我一点也不喜欢这种方法，因为它是一种变通方法，而不是解决方案。
给父级
.field:hover{z-index:1；}
并将
.field>.box{position absolute；…}
更改为
.field>.box{position:relative；..}
。这是为了不从页面流中删除框，并允许在悬停时将每个
字段
置于其他字段之上

对不起，我花了一些时间-我在atm机上很忙。非常感谢您的大力支持！这看起来很有希望，至于这个问题，考虑到小提琴中提供的确切代码，它肯定是一个解决方案。我在整理示例代码时犯了一个错误。有两个问题：1）在我的实际用户界面环境中，
.field
容器没有固定的高度。字段可以具有可变的高度。2）
.box
元素应始终与整个
.field
对象重叠，并始终从其0px顶部位置开始（从而完全覆盖它）你可以考虑你的答案，因为它是我想要的。但是为了不必打开一个新的问题，我希望你能给我一些关于如何使上述变化的见解。你知道什么是有趣的吗？我只是改变了<代码>位置：相对< /代码>回到<代码>位置：绝对< /代码>在我的E中。nEnvironment，留下您提供的其他修改。看这里-它工作了！我简直不敢相信。我以为我已经测试过了。我会再检查一些，但它似乎很好！@SquareCat让我知道它是如何工作的。实际上，它工作得很好。
上的
z-index:1
：hover
似乎可以做到这一点。只有一个缺点：什么时候当鼠标在框上时，框关闭，鼠标对框保持敏感，就好像它仍然在框上一样，而事实上它不在框上。只有移动鼠标时，框才会对鼠标光标下方的实际内容敏感。是否有办法在浏览器中强制“重绘”呢？可能是使用JS？因为这似乎是一个渲染问题。