延迟:hover在CSS3?
有没有办法延迟:hover事件不使用JavaScript? 我知道有一种方法可以延迟animation,但是我没有看到延迟hover事件。
编辑…
对不起,我应该包括这个开始…我正在build立一个像菜单的鱿鱼。 我想模拟什么hoverIntent没有增加额外的JS权重。 我宁愿把这看作是一个渐进式的增强,而不是让JS成为使用菜单的必要条件。
更新
这是最后的代码… http://jsfiddle.net/aEgV3/
感谢所有的帮助!
那么..你可以使用转换来延迟:hover
效果,如果效果是基于CSS的..
例如
div{ transition: 0s background-color; } div:hover{ background-color:red; transition-delay:1s; }
这将延迟应用hover效果( 在这种情况下的background-color
)一秒钟。
在http://dabblet.com/gist/1498443hover和closures的延迟演示;
延迟演示仅在http://dabblet.com/gist/1498446hover
针对转换和W3C CSS3转换的 供应商特定扩展
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; }
这将添加一个转换延迟,这将适用于几乎每个浏览器。
为了更美观的外观:)可以是:
left:-9999em; top:-9999em;
位置.sNv2 .nav UL
可以用z-index:-1
replacez-index:-1
和z-index:1
用于.sNv2 .nav LI:Hover UL