延迟:在CSS3中悬停？

Question

有没有办法延迟:Hover事件而不使用javascript？我知道有一种方法可以延迟动画,但我还没有看到任何延迟:Hover事件.

编辑...

对不起,我应该把这个包括在内......我正在建立像菜单一样的suckerfish之子.我想在没有添加额外JS重量的情况下模拟hoverIntent所做的事情.我更喜欢将其视为渐进增强,而不是将JS作为使用菜单的要求.

更新

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

感谢您的帮助!

Answer 1

嗯..你可以使用过渡来延迟:hover你想要的效果,如果效果是基于CSS的..

例如

div{
    transition: 0s background-color;
}

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

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

在http://dabblet.com/gist/1498443上进行暂停播放和延迟的演示

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

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

Answer 2

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

这将添加一个转换延迟,几乎适用于所有浏览器.