我有一个盒子,改变大小时被徘徊。但是,我想延迟mouSEOut阶段,以便盒子保持新的大小几秒钟,然后再恢复旧的大小。
div { width: 70px; -webkit-transition: .5s all; } div:hover { width:130px; }
这是否可以做到没有Javascript和CSS3?我只需要关心支持webkit。
解决方法
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秒钟,直到鼠标悬停被触发。