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

问题描述

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

我正在制作一个类似傻瓜的菜单.我想在不增加额外 JS 权重的情况下模拟 hoverIntent 的作用.我更愿意将此视为渐进式增强，而不是让 JS 成为使用菜单的必要条件.

菜单标记示例:

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

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

解决方案

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

例如

div{过渡:0s 背景颜色；}div:悬停{背景颜色:红色；转换延迟:1s；}

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

<小时>

悬停开启和关闭延迟演示:

div{显示:内联块；填充:5px；边距:10px；边框:1px 实心#ccc；过渡:0s 背景颜色；转换延迟:1s；}div:悬停{背景颜色:红色；}

<div>延迟悬停</div>

仅在悬停时的延迟演示:

div{显示:内联块；填充:5px；边距:10px；边框:1px 实心#ccc；过渡:0s 背景颜色；}div:悬停{背景颜色:红色；转换延迟:1s；}

<div>延迟悬停</div>

<小时>

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

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.

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.

Example of menu markup:

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

Here is the full demo: http://jsfiddle.net/aEgV3/

解决方案

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

For example

div{
    transition: 0s background-color;
}

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

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>

---

Vendor Specific Extentions for Transitions and W3C CSS3 transitions

这篇关于如何在 CSS 中延迟 :hover 效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！