CSS：在转换结束之前阻止属性影响元素

Question

我们有一些框来显示悬停的一些数据。因此，当我们将鼠标移动到一个元素上时，它应该展开，在其他元素前面，并显示隐藏的数据。

我做了类似的事情：

box:hover {
    z-index: 50;
}

但是有一个问题;当我们将鼠标移动到另一个外部空白区域时，z-index返回到值，与其他值相同。因此，可见悬停元素位于下层而不是下一层。

如何阻止属性应用，直到转换结束？

这是我的jsFiddle。尝试将鼠标悬停在一个元素上，将鼠标移出元素，其他元素的背景图像将在转换结束前位于我们的悬停元素前面。

更新：这是问题的屏幕截图。这是我们在元素上取消的时候。其他元素的background-image出现在我们悬停的元素前面。

Answer 1

也为z-index添加转换，但仅在.box处于正常状态时插入延迟。

这样做z-index将在悬停时显着改变，而在相反的操作（“取消切换”）时，z-index将采用其初始值，但仅在0.5秒后（持续时间）您的扩展效果是0.4秒）

.box {
   ...
   z-index: 1;
   -webkit-transition: z-index 0s .5s;   
      -moz-transition: z-index 0s .5s;   
           transition: z-index 0s .5s;   
}

.box:hover {
    -webkit-transition: z-index 0s 0s;
       -moz-transition: z-index 0s 0s;   
            transition: z-index 0s 0s; 
    z-index: 50;
}

示例：http://jsfiddle.net/yjg2oach/

Answer 2

向您的.box群组添加转化属性。

.box {
    float: left;
    position: relative;
    width: 100px;
    height: 100px;
    margin: 10px;
    margin-bottom: 35px;
        transition: .4s;
}

修正fiddle