我创建了 2 个相同大小的 div。第一个 div 的 z-index=1 并且颜色为红色。第二个 div 的 z-index=0 和黄色。我希望在将鼠标悬停在 div 上时，黄色框(最初低于)的 z-index 应该在 2 秒后变为 2(以便出现)。但我不明白为什么代码不起作用。
#animate1,
#animate2 {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
}
#animate1 {
background-color: red;
z-index: 1;
}
#animate2 {
background-color: yellow;
z-index: 0;
transition: z-index 0 linear 2s;
}
#all:hover #animate2 {
z-index: 2;
}<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="all">
<div id="animate1">
</div>
<div id="animate2">
</div>
</div>
</body>
</html>最佳答案
您应该将 #animate2 样式从 transition: z-index 0 linear 2s; 更新为 transition: z-index cubic-bezier(0.4, 0, 1, 1) 2s;.
关于html - z-index 过渡延迟不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37462843/