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

一尘不染

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

css

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

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

菜单标记示例：

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

阅读 5475

2020-05-16

共1个答案

一尘不染

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

2020-05-16