Z索引转换延迟不起作用？
[英]z-index transition delay not working?
问题描述
I have created 2 divs of same size. 
我创建了2个相同大小的div。 1st div has z-index=1 and color red. 第一个div的z-index = 1，颜色为红色。 2nd div has z-index=0 and color yellow. 第二个div的z-index = 0，颜色为黄色。 I want that on hovering over the divs, the z-index of yellow box(which was below initially) should become 2 (so that it comes up) after 2 seconds. 我希望将鼠标悬停在div上，然后在2秒钟后将黄色框的z-index（最初位于下方）设置为2（以便出现）。 But I cant understand why the code is not working. 但是我不明白为什么代码不起作用。
#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
You should update #animate2 style from transition: z-index 0 linear 2s; 您应该从transition: z-index 0 linear 2s;更新#animate2样式transition: z-index 0 linear 2s; to transition: z-index cubic-bezier(0.4, 0, 1, 1) 2s; transition: z-index cubic-bezier(0.4, 0, 1, 1) 2s; . 。
解决方案2
0 2016-05-26 14:10:39
you should use visibility:hidden ; 您应该使用visibility:hidden ; and opacity:0; 和opacity:0; then on hover change them to visibility:visible; 然后悬停将其更改为visibility:visible; and opacity:1 instead of changing z-index; 和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
Delete de '0' or put '0s' in transition: z-index 0 linear 2s; 删除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
The transition-duration you have set does not include a unit - <time> data types in CSS must include a unit or they are considered invalid and, therefore, ignored. 您设置的transition-duration不包含单位-CSS中的<time>数据类型必须包含单位，否则它们将被视为无效，因此将被忽略。 In the instance of the example code you included, as you are using the transition shorthand property then the whole lot is actually being ignored. 在您所包含的示例代码实例中，由于您使用的是transition速记属性，因此实际上全部都被忽略了。
So, to fix your issue, you need to add a unit to the transition-duration - either s or ms will do as the value is 0 - or, as others have suggested, because the value is 0 , simply omit the transition-duration completely. 因此，要解决您的问题，您需要向transition-duration添加一个单位s或ms都将作为值的0 -或如其他人所建议的那样，因为该值为0 ，只需忽略transition-duration完全。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.