CSS：防止属性影响元素直到转换结束

Question

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

我做了这样的事情：

box:hover {
    z-index: 50;
}

但是有一个问题；当我们将鼠标移到另一个外层白色 space 上时，z-index 返回值，与其他值相同。所以可以看出悬停的元素在下一层。

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

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

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

Answer 1

向您的 .box 组添加过渡属性。

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

已修复fiddle

Answer 2

也为 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/

CSS：防止属性影响元素直到转换结束

CSS: Preventing a property to affect on element until the end of transition

css

css-transitions

z-index

CSS：防止 属性 影响元素直到转换结束

CSS: Preventing a property to affect on element until the end of transition

css

css-transitions

z-index

CSS：防止属性影响元素直到转换结束