使用CSS3转换的延迟鼠标移出/悬停
使用CSS3转换的延迟鼠标移出/悬停
提问于 2012-02-22 18:33:31
我有一个可以在悬停时改变大小的盒子。但是，我想延迟鼠标移出阶段，以便框保持新大小几秒钟，然后再恢复旧大小。
div {
width: 70px;
-webkit-transition: .5s all;
}
div:hover {
width:130px;
}有没有可能没有Javascript而只有CSS3呢？我只需要关心是否支持webkit。
回答 2
Stack Overflow用户
回答已采纳
发布于 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被触发。
Stack Overflow用户
发布于 2015-05-06 00:39:04
转换可以声明为
transition: .5s all 5s(简而言之，第一个数字是持续时间，第二个数字是延迟)，然后你不需要单独的转换延迟
对不起，我没有足够的分数，所以无法添加为评论
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9393125
复制相关文章
相似问题