我有一个悬停时会改变大小的框。然而，我想推迟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;
}
这将立即触发mouseover状态，但要等待5秒钟，直到触发mouseout。
Fiddle
转换可以声明为
transition: .5s all 5s
（简写，第一个数字是持续时间，第二个数字是延迟）那么你就不需要单独的转换延迟
对不起，我没有足够的分数，所以不能添加为注释。