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

Posted 2023-03-06

【中文标题】使用 CSS3 过渡延迟鼠标悬停/悬停

【英文标题】：Delay mouseout/hover with CSS3 transitions

【发布时间】：2012-03-12 16:22:25

【问题描述】：

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

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


div:hover 
    width:130px;

在没有 javascript 而只有 CSS3 的情况下可以做到这一点吗？我只需要关心支持 webkit。

【问题讨论】：

你试过css3动画属性吗？我已经尝试了一些动画属性的东西，但我不确定这是你想要的。但如果你愿意，我可以给你。

【参考方案1】：

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

【讨论】：

已编辑以添加非 webkit 前缀 - 这只是一个好习惯

在“div”标签定义中，指定“transition:”和“transition-delay”本质上不是重复的吗？转换规范的第一个值是延迟值，不是吗？

@Screenack 不，第一个值是过渡的持续时间 - 完成后需要多长时间。

转换的真棒使用，patad。

【参考方案2】：

转换可以声明为

transition: .5s all 5s

（简写，第一个数字是持续时间，第二个数字是延迟） 那么你就不需要单独的转换延迟

抱歉，积分不足，无法添加评论