我有一个盒子在悬停时会改变大小。但是,我想延迟鼠标输出阶段,以便在恢复旧尺寸之前,盒子保持新尺寸几秒钟。
div {
width: 70px;
-webkit-transition: .5s all;
}
div:hover {
width:130px;
}
这可能没有Javascript和CSS3吗?我只需关心支持 webkit 。
答案 0 :(得分:38)
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;
}
这将立即触发鼠标悬停状态,但等待5秒直到触发鼠标移除。
答案 1 :(得分:6)
转换可以声明为
transition: .5s all 5s
(简写,第一个数字是持续时间,第二个数字是延迟) 那么你不需要单独的转换延迟
抱歉,由于我没有足够的积分,无法添加评论