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

【问题标题】：How can I delay a :hover effect in CSS?如何在 CSS 中延迟 :hover 效果？
【发布时间】：2012-01-23 20:44:27
【问题描述】：

有没有办法在不使用 JavaScript 的情况下延迟 :Hover 事件？我知道有一种方法可以延迟动画，但我没有看到任何延迟 :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/

【问题讨论】：

有趣的问题，但我认为'不;不幸的是，not without JavaScript' 很可能是答案。

标签： css hover delay

【解决方案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;
}

&lt;div&gt;delayed hover&lt;/div&gt;

仅在悬停时的延迟演示：

div{
    display:inline-block;
    padding:5px;
    margin:10px;
    border:1px solid #ccc;
    transition: 0s background-color;
}
div:hover{
    background-color:red;    
    transition-delay:1s;
}

&lt;div&gt;delayed hover&lt;/div&gt;

Vendor Specific Extentions for Transitions 和 W3C CSS3 transitions

【讨论】：

我更新了我的问题...我不确定转换是否适用于我的情况。我将子菜单定位在屏幕上，并在悬停时放回原位。
但是如何设置进出时间。就像当用户将鼠标放在 div 上 1 秒时...然后发生转换。但是当搬出去时..然后立即过渡出去..
处理过渡持续时间的属性是不同的。您可以对它们进行明显的操作以达到您想要的效果，例如：dabblet.com/gist/332903040f1f07754d1f
@VictoriaStuart 取决于您如何显示/隐藏它。如果是display 属性没有，但如果你把它移出屏幕，那么是的。
持续时间也会在 :active 生效。您需要在 :active 上将延迟重置为 0 秒，以避免在任何 :active 转换生效之前等待。

【解决方案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;
}

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

【讨论】：

【解决方案3】：

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

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

.sNv2 .nav UL 的位置可以用z-index:-1 和z-index:1 代替.sNv2 .nav LI:Hover UL

【讨论】：