Z索引转换延迟不起作用？
[英]z-index transition delay not working?
问题描述
我创建了2个相同大小的div。 第一个div的z-index = 1，颜色为红色。 第二个div的z-index = 0，颜色为黄色。 我希望将鼠标悬停在div上，然后在2秒钟后将黄色框的z-index（最初位于下方）设置为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>
4 个解决方案
解决方案1
0 2016-05-26 13:55:12
您应该从transition: z-index 0 linear 2s;更新#animate2样式transition: z-index 0 linear 2s; transition: z-index cubic-bezier(0.4, 0, 1, 1) 2s; 。
解决方案2
0 2016-05-26 14:10:39
您应该使用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>
解决方案3
0 2016-05-26 14:24:00
删除de'0'或将'0s' 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>
解决方案4
0 2016-05-26 14:46:12
您设置的transition-duration不包含单位-CSS中的<time>数据类型必须包含单位，否则它们将被视为无效，因此将被忽略。 在您所包含的示例代码实例中，由于您使用的是transition速记属性，因此实际上全部都被忽略了。
因此，要解决您的问题，您需要向transition-duration添加一个单位s或ms都将作为值的0 -或如其他人所建议的那样，因为该值为0 ，只需忽略transition-duration完全。
不透明度过渡不起作用，Z索引问题？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.