我有一个在悬停时会改变大小的框。但是,我想延迟 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。
关于css - 使用 CSS3 转换延迟鼠标移开/悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9393125/