如何在CSS中延迟:hover效果?

如何在CSS中延迟:hover效果?,第1张

如何在CSS中延迟:hover效果

:hover
如果效果是基于CSS的,则可以使用过渡来延迟所需的效果。

例如

div{    transition: 0s background-color;}div:hover{    background-color:red;        transition-delay:1s;}

这将使悬停效果(

background-color
在这种情况下)的应用延迟一秒钟。


悬停打开和关闭时的延迟演示:

div{    display:inline-block;    padding:5px;    margin:10px;    border:1px solid #ccc;    transition: 0s background-color;    transition-delay:1s;}div:hover{    background-color:red;}<div>delayed hover</div>

仅在以下位置悬停时演示延迟:

div{    display:inline-block;    padding:5px;    margin:10px;    border:1px solid #ccc;    transition: 0s background-color;}div:hover{    background-color:red;    transition-delay:1s;}<div>delayed hover</div>



欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5673965.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-12-17
下一篇 2022-12-17

发表评论

登录后才能评论

评论列表(0条)

保存