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

Question

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

我做了这样的事情:

box:hover {
    z-index: 50;
}

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

如何防止财产申请,直到过渡期结束？

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

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

Answer 1

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

\n\n

这样做z-index会在悬停时立即改变，而在相反的动作（\xe2\x80\x9cunhover\xe2\x80\x9d）上，它将z-index采用其初始值，但仅在0.5几秒后（扩展效果的持续时间为0.4秒）

\n\n

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

\n\n

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

\n