z-index transition delay not working?
Question
I have created 2 divs of same size. 1st div has z-index=1 and color red. 2nd div has z-index=0 and color yellow. 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. 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 answers
solution1
0 2016-05-26 13:55:12
You should update #animate2 style from transition: z-index 0 linear 2s; to transition: z-index cubic-bezier(0.4, 0, 1, 1) 2s; .
solution2
0 2016-05-26 14:10:39
you should use visibility:hidden ; and opacity:0; then on hover change them to visibility:visible; and opacity:1 instead of changing 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>
solution3
0 2016-05-26 14:24:00
Delete de '0' or put '0s' in 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>
solution4
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. 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.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.