延迟：悬停在CSS3？ [英] Delay :Hover in CSS3?

问题描述

有没有办法延迟：悬停事件而不使用javascript？我知道有一种方法可以延迟动画，但我没有看到任何延迟：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权重。

Sorry, I should have included this to begin with... 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.

更新

这是最后的代码... http://jsfiddle.net/aEgV3/

Here is the final code... http://jsfiddle.net/aEgV3/

感谢所有的帮助！

推荐答案

使用转换来延迟：hover 效果，如果效果是基于CSS的。

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

/ p>

For example

div{
    transition: 0s background-color;
}

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

这会延迟应用悬停效果（ <$ c $

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

仅在 http://dabblet.com/gist/1498446 悬停时才显示延迟的演示

Demo of delay only on hover on at http://dabblet.com/gist/1498446

供应商转换的特定扩展和 W3C CSS3转换

这篇关于延迟：悬停在CSS3？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！