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

Question

有没有一种方法可以延迟:hover事件而不使用JavaScript？我知道有一种延迟动画的方法，但我还没有看到任何关于延迟:hover事件的内容。

我正在构建一个类似于son-of-suckerfish的菜单。我想模拟hoverIntent的效果，而不添加额外的JavaScript代码。我更愿意将其视为渐进增强，并不要求使用JS来使用菜单。

菜单标记示例：

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

这里是完整演示：http://jsfiddle.net/aEgV3/

- Adam Youngers

---

有趣的问题，但不幸的是我认为答案很可能是“不行；没有 JavaScript 就不行”。 - David Thomas

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>

---

过渡效果的浏览器私有扩展和W3C CSS3 过渡

- Gabriele Petrioli

---

我更新了我的问题...我不确定在我的情况下是否可以使用过渡效果。我有子菜单定位在屏幕上，并在悬停时放回原位。 - Adam Youngers

如何设置进入和离开的时间。例如当用户将鼠标悬停在 div 上一秒钟时，就会发生过渡效果。但是当鼠标移出时，立即结束过渡效果。 - Uday Hiwarale

处理过渡时长的属性是不同的。你可以分别操纵它们来达到你想要的效果，例如：http://dabblet.com/gist/332903040f1f07754d1f - Gabriele Petrioli

@VictoriaStuart 取决于你如何显示/隐藏它。如果是通过 display 属性实现的，那么不行，但如果将其移出屏幕，则可以。 - Gabriele Petrioli

持续时间也会对:active生效。您需要在:active上将延迟重置为0秒，以避免在任何:active转换生效之前等待。 - John Ohara

Answer 2

div {
     background: #dbdbdb;
    -webkit-transition: .5s all;   
    -webkit-transition-delay: 5s; 
    -moz-transition: .5s all;   
    -moz-transition-delay: 5s; 
    -ms-transition: .5s all;   
    -ms-transition-delay: 5s; 
    -o-transition: .5s all;   
    -o-transition-delay: 5s; 
    transition: .5s all;   
    transition-delay: 5s; 
}

div:hover {
    background:#5AC900;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

这将添加一个过渡延迟，适用于几乎所有浏览器。

- Shailesh kala

Answer 3

为了更美观的外观 :) 可以：

left:-9999em; 
top:-9999em; 

.sNv2 .nav UL 的位置可以被 z-index:-1 取代，并且 .sNv2 .nav LI:Hover UL 的位置可由 z-index:1 取代。

- Колян Чернышов