Question

我创建了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>

Answer 1

您应该将#animate2样式从transition: z-index 0 linear 2s;更新为transition: z-index cubic-bezier(0.4, 0, 1, 1) 2s;。

Answer 2

你应该使用visibility:hidden;和opacity:0;然后在悬停时将其更改为visibility:visible;和opacity:1，而不是更改z-index;

#animate1,
#animate2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
}

#animate1 {
  background-color: red;
  z-index: 1;
}

#animate2 {
  background-color: yellow;
  visibility:hidden;
  opacity:0;
  z-index:2;
  transition: all linear 2s;
}

#all:hover #animate2 {
  visibility:visible;
  opacity:1;
}

<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="all">
      <div id="animate1">
      </div>
      <div id="animate2">
      </div>
    </div>
  </body>
</html>

Answer 3

删除de'0'或将{0}放入transition: z-index 0 linear 2s;

#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 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>

Answer 4

您设置的transition-duration不包含单位 - CSS 中的<time>数据类型必须包含单位，否则会被视为无效，因此会被忽略。在您包含的示例代码的实例中，当您使用transition速记属性时，实际上整个批次都被忽略。

因此，要解决您的问题，您需要向transition-duration添加一个单元 - s或ms将执行，因为值为0 - 或者，正如其他人所建议的那样，因为值为0，所以只需完全省略transition-duration。

z-index转换延迟不起作用？

4 个答案: