如何在CSS中延迟：hover效果？

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

有没有办法在不使用JavaScript的情况下延迟：Hover事件？我知道有一种方法可以延迟动画，但是在延迟：hover事件上我什么都没看到。

我正在建立菜单之类的-鱼。我想模拟hoverIntent的作用，而不增加额外的JS重量。我更喜欢将其视为渐进式增强，而不是将JS作为使用菜单的要求。

菜单标记示例：

<div>
    <div>
        <ul>
            <li><a href="#">
                <ul>
                    <li></li>
                    <li></li>
                </ul>
            </li>
            <li>
            <li>
        </ul>
    </div>
</div>

回答：

: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>

以上是 如何在CSS中延迟：hover效果？ 的全部内容， 来源链接： utcz.com/qa/436452.html

回到顶部