Question

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

编辑...

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

更新

以下是最终代码...... http://jsfiddle.net/aEgV3/

感谢您的帮助！

Answer 1

嗯..如果效果是基于CSS的话，你可以使用转换来延迟你想要的:hover效果..

例如

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

处悬停时延迟演示

Vendor Specific Extentions for Transitions和W3C CSS3 transitions

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

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

Answer 3

为了更美观的外观:)可以是：

left:-9999em; 
top:-9999em;

<{1}}的位置可以由.sNv2 .nav UL和z-index:-1取代z-index:1

延迟：在CSS3中悬停？

3 个答案: