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

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

我正在建立一个像菜单的。鱼。我想模拟hoverIntent的作用，而不增加额外的JS重量。我宁愿将此视为渐进式增强，而不是使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 delay

— 亚当·杨格斯（Adam Youngers）
source

有趣的问题，但我认为'不；不幸的是，并非没有JavaScript”可能是答案。

— 大卫说要恢复莫妮卡（Monica）

Answers:

160

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

展开摘要

过渡和W3C CSS3过渡的供应商特定扩展

— 加布里埃莱·彼得里奥利（Gabriele Petrioli）
source

我更新了我的问题...我不确定是否可以进行过渡。我将子菜单放置在屏幕上，并在悬停时放回原处。

— 亚当·杨格斯

但是如何设置进出时间。就像当用户将鼠标放在div上1秒钟...时，就会发生过渡。但是，当移动了..然后立即转移出去..

— 乌代Hiwarale

处理过渡持续时间的属性是不同的。您可以清楚地操纵它们以达到所需的效果，例如：dabblet.com/gist/332903040f1f07754d1f

— Gabriele Petrioli

@VictoriaStuart取决于您如何显示/隐藏它。如果它的display属性为no，但是如果将其移出屏幕，则为yes。

— 加布里埃莱·彼得里奥里

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

— John Ohara

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

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

— 谢里什·卡拉
source

为了更美观：)可以是：

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

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

— КолянЧернышов
source