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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

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

回答：

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秒钟，直到触发鼠标悬停。

以上是 使用CSS3过渡延迟鼠标移出/悬停 的全部内容， 来源链接： utcz.com/qa/432936.html

回到顶部