如何在CSS中延迟:hover效果? [英] How can I delay a :hover effect in CSS?

问题描述

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

Is there a way to delay the :Hover event without using JavaScript? I know there is a way to delay animations, but I haven't seen anything on delaying the :hover event.

我正在建立菜单之类的.鱼.我想模拟hoverIntent的作用而无需增加额外的JS重量.我宁愿将其视为渐进式增强功能，而不要使JS成为使用菜单的要求.

I'm building a son-of-suckerfish like menu. I'd like to simulate what hoverIntent does without adding the extra JS weight. I'd prefer to treat this as a progressive enhancement and not make JS a requirement for using the menu.

菜单标记示例:

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

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

推荐答案

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

You can use transitions to delay the :hover effect you want, if the effect is CSS-based.

例如

div{
    transition: 0s background-color;
}

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

这将使悬停效果(在这种情况下为 background-color )的应用延迟一秒钟.

this will delay applying the the hover effects (background-color in this case) for one second.

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

Demo of delay on both hover on and off:

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>

延迟演示仅在以下位置悬停:

Demo of delay only on hover on:

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>

针对转换的供应商特定扩展名和 查看全文