如何在 CSS 中延迟：hover 效果

发布于12月20日

有没有办法在不使用JavaScript的情况下延迟:Hover事件？我知道有一种方法可以延迟动画，但我没有看到任何关于延迟:悬停事件的东西.

我在做一份像吸盘鱼一样的菜单.我想在不添加额外JS权重的情况下模拟hoverIntent的功能.我更愿意将此视为渐进式增强，而不是将JS作为使用菜单的要求.

菜单标记示例:

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

下面是完整的演示:http://jsfiddle.net/aEgV3/

推荐答案

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

例如

div{
    transition: 0s background-color;
}

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

这将延迟应用悬停效果(100 in this case)一秒.

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

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;
}