使用CSS3过渡延迟鼠标悬停/悬停

时间:2012-02-22 10:33:31

标签: css css3 webkit css-transitions

我有一个盒子在悬停时会改变大小。但是,我想延迟鼠标输出阶段,以便在恢复旧尺寸之前,盒子保持新尺寸几秒钟。

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

div:hover {
    width:130px;
}

这可能没有Javascript和CSS3吗?我只需关心支持 webkit

2 个答案:

答案 0 :(得分:38)

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

答案 1 :(得分:6)

转换可以声明为

transition: .5s all 5s

(简写,第一个数字是持续时间,第二个数字是延迟) 那么你不需要单独的转换延迟

抱歉,由于我没有足够的积分,无法添加评论