CSS转换影响框可访问性/鼠标敏感

我有一个用户界面的情况下，我重新创建in this jsFiddle。请看一看。。CSS转换影响框可访问性/鼠标敏感

基本上，box元素应该总是重叠的所有其他人时，它是可见的（当其父field处于状态:hover这似乎做工精细，视觉上 - 但要尽量在box元素移动你的鼠标，而它仍然是在过渡。你会发现，父元素的:hover变得过时，导致box再次关闭。

不过，如果你稍等片刻时间越长，向下（过渡结束前不久或一次移动鼠标之前它会完成），您将看到box保持打开状态。

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

这是怎么发生的？

，我怎么能修改的方式，box将在:hover在field使用给定的CSS过渡fluid打开，但被完全访问（最前面）从最初一刻过渡开始CSS定义？

注：

我只需要这在Chrome工作完全。

在我的生活环境中，我使用了一个更快的转换，但是在这个例子中我使用了更长的时间，因为它更容易测试。

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

来源

2014-03-04 SquareCat

给父母.field:hover { z-index:1; }并将.field > .box { position: absolute; ... }更改为.field > .box { position: relative; ... }。这是不是从页面的流量取出盒子，并允许每个field被放置在他人徘徊

Demo

来源

2014-03-04 22:13:47

对不起时，我花了一段时间 - 我是相当繁忙大气压。非常感谢您的盛情投入！它看起来很有希望，至于这个问题，考虑到小提琴中提供的确切代码，它绝对是一个解决方案。将示例代码放在一起时我犯了一个错误。有两个问题：1）我的实际用户界面环境中的'.field'容器没有固定的高度。这些字段可以具有可变高度。 2）'.box'元素应该总是与整个'.field'对象重叠，并且始终从0px顶部位置开始（因此完全覆盖它）。 – SquareCat

你可以考虑接受你的答案，因为它符合我的要求。但为了不必提出一个新问题，我希望你对我如何使上述改变有所了解有所了解。 – SquareCat

你知道什么有趣吗？我刚刚在我的现场环境中将'position：relative'改回''position：absolute''，而留下您提供的其他修改。看到这里 - 它的作品！我几乎不能相信它。我以为我有这个测试。我会再检查一下，但它似乎很好！ – SquareCat

CSS转换影响框可访问性/鼠标敏感

回答

相关问题