使用CSS3转换延迟mouseout /悬停

我有一个在悬停时更改大小的框。但是，我想延迟鼠标移出阶段，以便在将旧尺寸恢复之前，该框会将新尺寸保持几秒钟。使用CSS3转换延迟mouseout /悬停

div { 
    width: 70px; 
    -webkit-transition: .5s all;  
} 

div:hover { 
    width:130px; 
}

这是可以做到没有Javascript和只有CSS3？我只需要关心支持webkit。

来源

2012-02-22 patad

你尝试过CSS3动画属性？我已经尝试了一些动画属性的东西，但我不确定这是你想要的。但如果你想我可以给你。 – Shabib 2012-02-22 11:01:41

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秒，直到鼠标被触发。

Fiddle

来源

2012-02-22 11:47:11 patad

编辑添加的非WebKit的前缀太 - 这是对“格”标签的定义，是不是仅指定好的做法 – 2012-02-22 16:06:32

“转型”和“过渡延迟”本质上是一个重复？转换规格的第一个值是延迟值，不是？ – Screenack 2013-04-26 21:02:21

@Screenack不，第一个值是转换的持续时间 - 一旦它完成，需要多长时间才能完成。 – Sandwich 2015-01-10 21:22:59

过渡可以声明为

transition: .5s all 5s

（简写，第一个数字是时间，第二个数字是延迟）那么你并不需要单独的过渡延迟

对不起，不能添加的评论，因为我没有足够的积分

来源

2015-05-05 16:39:03 Jenny

使用CSS3转换延迟mouseout /悬停

回答

相关问题