保持使用样式：悬停直到过渡完成？

Question

我在页面上有一堆图块，当用户将鼠标悬停在图片上时会展开。扩展的应该具有最高的z-index，这是有效的，但我需要保留z-index直到大小转换完成。有没有办法只使用CSS，没有JavaScript ？由于我正在使用转换，我不太担心这里的兼容性，我正确地应用了渐进增强。

Here's a jsFiddle证明了这一点。鼠标悬停在A;它过渡了。然而，鼠标离开它，它落后于B.我需要它留在B的前面，直到过渡完成。是否有一种优雅的方式来做到这一点？

Answer 1

您还需要将z-index设置为过渡：http://jsfiddle.net/uHJwT/2/

Answer 2

您需要定义z-index，并为其设置动画。

This适用于Firefox（8.0.1）和Webkit。

Answer 3

尝试使用http://jsfiddle.net/frozenkoi/YK52N/中的转换（请注意CSS部分中的注释，适用于.item和.item:hover）

诀窍是也使用z-index属性的转换。例如，您可以为正常项目设置值10，为悬停项目设置11。您还必须使用transition-delay，以便用于移动鼠标的动画不会立即重置z-index。接下来，将transition-delay的不同值添加到值为零的:hover规则中，以便z-index在鼠标进入项目时立即更新。

简而言之，.item有鼠标移出项目的转换，.item:hover鼠标移入时的规则。

Answer 4

以下是一个解决方案：http://jsfiddle.net/uHJwT/4/

基本上，它使用另一个具有足够宽度和宽度的包装div。覆盖动画表面的高度 - 在悬停时，它会提升其z-index，使动画div保持在顶部。当然，这不是完全证明的解决方案 - 它是基于这样一个事实，即典型的悬停将是向下移动并且它适用于此 - 但是在对角线方向上悬停是行不通的。但似乎只是一个合理的CSS解决方案 - 我宁愿用js来获得一个完美的解决方案。