延迟鼠标悬停/悬停与CSS3转换

我有一个盒子,改变大小时被徘徊。但是,我想延迟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秒钟,直到鼠标悬停被触发。

Fiddle

相关文章

Css常用的排序方式权重分配 排序方式: 1、按类型 ...
原文:https://www.cnblogs.com/wenruo/p/9732704.html 先上...
css属性:word-wrap:break-word; 与 word-break:break-all 的...
https://destiny001.gitee.io/color/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML...
css之background的cover和contain的缩放背景图 对于这两个属...