如何在 CSS 中延迟 :hover 效果？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8566090/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I delay a :hover effect in CSS?
提问by Adam Youngers
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.
有没有办法在不使用 JavaScript 的情况下延迟 :Hover 事件？我知道有一种方法可以延迟动画，但我没有看到任何延迟 :hover 事件的方法。
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.
我正在构建一个类似菜单的吸盘之子。我想在不添加额外 JS 权重的情况下模拟 hoverIntent 的作用。我更愿意将其视为渐进式增强，而不是让 JS 成为使用菜单的必要条件。
Example of menu markup:
菜单标记示例：
<div>
<div>
<ul>
<li><a href="#">
<ul>
<li></li>
<li></li>
</ul>
</li>
<li>
<li>
</ul>
</div>
</div>
Here is the full demo: http://jsfiddle.net/aEgV3/
这是完整的演示：http: //jsfiddle.net/aEgV3/
回答by Gabriele Petrioli
You can use transitions to delay the :hovereffect you want, if the effect is CSS-based.
:hover如果效果是基于 CSS 的，您可以使用过渡来延迟您想要的效果。
For example
例如
div{
transition: 0s background-color;
}
div:hover{
background-color:red;
transition-delay:1s;
}
this will delay applying the the hover effects (background-colorin this case) for one second.
这将延迟应用悬停效果（background-color在本例中）一秒钟。
Demo of delay on both hover on and off:
悬停开启和关闭延迟演示：
div{
display:inline-block;
padding:5px;
margin:10px;
border:1px solid #ccc;
transition: 0s background-color;
transition-delay:1s;
}
div:hover{
background-color:red;
}<div>delayed hover</div>Demo of delay only on hover on:
仅在悬停时延迟演示：
div{
display:inline-block;
padding:5px;
margin:10px;
border:1px solid #ccc;
transition: 0s background-color;
}
div:hover{
background-color:red;
transition-delay:1s;
}<div>delayed hover</div>Vendor Specific Extentions for Transitionsand W3C CSS3 transitions
回答by Shailesh kala
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;
}
This will add a transition delay, which will be applicable to almost every browser..
这将增加一个过渡延迟，这将适用于几乎所有浏览器。
回答by Колян Чернышов
For a more aesthetic appearance :) can be:
对于更美观的外观:) 可以是：
left:-9999em;
top:-9999em;
position for .sNv2 .nav ULcan be replaced by z-index:-1and z-index:1for .sNv2 .nav LI:Hover UL
位置 for.sNv2 .nav UL可以替换为z-index:-1and z-index:1for.sNv2 .nav LI:Hover UL
