影响框可访问性/鼠标灵敏度的 CSS 过渡答案

【问题标题】：CSS transition affecting box accessibility/mouse-sensitivity影响框可访问性/鼠标灵敏度的 CSS 过渡
【发布时间】：2014-04-06 10:29:19
【问题描述】：

我有一个用户界面情况，我重新创建了in this jsFiddle。请看一下。

基本上，box 元素在可见时应始终与所有其他元素重叠（当其父 field 处于状态 :hover 时。这在视觉上似乎工作正常 - 但尝试将鼠标移动到 @ 987654325@ 元素仍在转换中。您会注意到父元素上的:hover 已过时，导致box 再次关闭。

但是，如果您在向下移动鼠标之前稍等片刻（在过渡结束前不久或完成后），您将看到box 保持打开状态。

我进行了修改z-index 的测试，甚至尝试使z-index 成为过渡的一部分，但无济于事。问题依然存在。

为什么会这样？

我如何修改 CSS 定义，使 box 将在 :hover 上打开 field 使用给定的 CSS 转换 fluid 并且从一开始就可以完全访问（最前面）过渡开始了吗？

注意事项：

我只需要它来专门在 Chrome 中工作。

在我的实际环境中，我使用了更快的过渡，但在本示例中我将其延长了很多，因为它更易于测试。

我通过在每个字段元素上应用下降的z-index 解决了这个问题，但我根本不喜欢这种方法，因为它是一种解决方法，而不是解决方案。

【问题讨论】：

标签： css google-chrome z-index css-transitions css-transforms

【解决方案1】：

给父级.field:hover { z-index:1; } 并将.field > .box { position: absolute; ... } 更改为.field > .box { position: relative; ... }。这是为了不从页面流中删除框，并允许每个 field 在悬停时放置在其他框上

Demo

【讨论】：

对不起，我花了一段时间 - 我很忙 atm。非常感谢您的大力投入！它看起来很有希望，至于问题，鉴于小提琴中提供的确切代码，它绝对可以作为一个解决方案。将示例代码放在一起时犯了一个错误。有两个问题：1）在我的实际用户界面环境中，.field 容器没有固定高度。字段可以具有可变高度。 2) .box 元素应始终与整个 .field 对象重叠，并始终从其 0px 顶部位置开始（从而完全覆盖它）。
您可以认为您的答案已被接受，因为它符合我的要求。但为了不必提出新问题，我希望您对如何使上述更改生效。
你知道什么好玩吗？我刚刚在我的实时环境中将position: relative 改回position: absolute，留下您提供的其他修改。看看这里 - 它有效！我简直不敢相信。我以为我已经测试过了。我会再检查一些，但它似乎很好！
@SquareCat 告诉我进展如何
好的，实际上效果很好。 z-index: 1 上的 :hover 似乎可以解决问题。只有一个缺点：当鼠标在盒子上时盒子关闭时，鼠标仍然对它敏感，就好像它还在那里，而实际上它不是。只有在移动鼠标时，它才会对鼠标光标下方的实际内容变得敏感。有没有办法在浏览器中强制“重绘”？也许用JS？因为这似乎是一个渲染问题。