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

一尘不染

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

css

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

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

div:hover {
    width:130px;
}

是否可以只使用CSS3而无需Javascript？我只需要关心支持 webkit 。

阅读 1163

2020-05-16

共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;
}

这将立即触发鼠标悬停状态，但请等待5秒钟，直到触发鼠标悬停。

2020-05-16