使用CSS3转换延迟mouseout / hover [英] Delay mouseout/hover with CSS3 transitions

问题描述

我有一个框，当悬停时更改大小。但是，我想延迟mouseout阶段，这样盒子保持新的大小几秒钟，之前的旧尺寸回来。

I've got a box that changes size when being hovered. However, I would like to delay the mouseout stage, so that the box keep the new size for a few seconds, before getting the old size back.

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

div:hover {
    width:130px;
}

这是否可以不使用Javascript和CSS3？我只需要关心支持 webkit 。

Is this possible to do WITHOUT Javascript and only CSS3? I only have to care about supporting 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秒，直到mouseout

This will trigger the mouseover state right away, but wait 5 sec till the mouseout is triggered.

小提琴

这篇关于使用CSS3转换延迟mouseout / hover的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！