css - 我怎样才能延迟 :hover effect in CSS?

Question

有没有办法在不使用 JavaScript 的情况下延迟 :Hover 事件？我知道有一种方法可以延迟动画，但我还没有看到有关延迟 :hover 事件的任何信息。

我正在构建一个类似 suckerfish 的菜单。我想在不添加额外的 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/

Answer 1

如果效果是基于 CSS 的，您可以使用过渡来延迟您想要的 :hover 效果。

例如

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>

---

Vendor Specific Extentions for Transitions和 W3C CSS3 transitions