css - 使用 CSS3 转换延迟鼠标移开/悬停

标签 css webkit css-transitions

我有一个在悬停时会改变大小的框。但是,我想延迟 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

关于css - 使用 CSS3 转换延迟鼠标移开/悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9393125/

相关文章:

html - 缩放转换在 Firefox 中不起作用

html - 如何让div落在前一个div旁边

html - CSS:选择相邻输入时的跨度颜色

html - CSS 溢出 :hidden not working on my slider

objective-c - WebKit 10.8 : How to programmatically set the value of an input[type=file] field?

jquery - 如何让一个固定的 DIV 保持在绝对之上?

javascript - 标签和字段在同一行的 ExtJS 表单

css - -不再支持webkit-text-size-adjust,如何设置font-size小于12px

javascript - Safari 2.0 中修饰键的键盘事件

Internet Explorer 的 CSS 回退