z-index转换延迟不起作用？
z-index转换延迟不起作用？
提问于 2016-05-26 21:51:24
我已经创建了2个相同大小的div。第一个div的z-index=1，颜色为红色。第二个div的z-index=0，颜色为黄色。我希望当鼠标悬停在div上时，黄色方框的z索引(最初在下方)应该在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>
Stack Overflow用户
发布于 2016-05-26 22:10:40
您应该使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37462843
复制相关文章
相似问题
腾讯云开发者
