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

问题描述

有没有办法延迟：悬停事件而不使用javascript？我知道有一种方法可以延迟动画，但我没有看到任何延迟：Hover事件。

已编辑...

对不起，我应该包括这个开始...我正在建立一个吸吮鱼儿像菜单。我想模拟什么hoverIntent没有添加额外的JS权重。

更新

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

感谢所有的帮助！

解决方案

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

/ p>

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

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

---

在 http://dabblet.com/gist/1498443 上悬停和关闭延迟演示p>

仅在 http：// dabblet上悬停时才显示延迟。 com / gist / 1498446

---

转换的供应商特定扩展和 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.

Edited...

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.

Updated

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

Thanks for all the help!

解决方案

Well.. 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 at http://dabblet.com/gist/1498443

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

---

Vendor Specific Extentions for Transitions and W3C CSS3 transitions

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