我有一个可以在悬停时改变大小的盒子。但是,我想延迟鼠标移出阶段,以便框保持新大小几秒钟,然后再恢复旧大小。
div {
width: 70px;
-webkit-transition: .5s all;
}
div:hover {
width:130px;
}
有没有可能没有Javascript而只有CSS3呢?我只需要关心是否支持webkit。
发布于 2012-02-22 19:47:11
div {
width: 70px;
-webkit-transition: .5s all;
-webkit-transition-delay: 5s;
-moz-transition: .5s all;
-moz-transition-delay: 5s;
-ms-transition: .5s all;
-ms-transition-delay: 5s;
-o-transition: .5s all;
-o-transition-delay: 5s;
transition: .5s all;
transition-delay: 5s;
}
div:hover {
width:130px;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
这将立即触发mouseover状态,但要等待5秒直到mouseout被触发。
发布于 2015-05-06 00:39:04
转换可以声明为
transition: .5s all 5s
(简而言之,第一个数字是持续时间,第二个数字是延迟),然后你不需要单独的转换延迟
对不起,我没有足够的分数,所以无法添加为评论
https://stackoverflow.com/questions/9393125
复制相似问题