Html CSS - 慢悬停效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19469495/
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
CSS - Slow Hover effect
提问by joebegborg07
I am creating a CSS dynamic menu and would like to delay the on hover action. The reaction of the menu to when hovering over it's links is to provide a sub menu(drop down).
我正在创建一个 CSS 动态菜单，并希望延迟悬停操作。将鼠标悬停在其链接上时菜单的反应是提供一个子菜单（下拉菜单）。
I would like to slow down the drop down process so that the sub menu would not appear instantly, but would take 1 second to drop down. Help is greatly appreciated.
我想减慢下拉过程，以便子菜单不会立即出现，而是需要 1 秒才能下拉。非常感谢帮助。
Code is below:
代码如下：
<html>
<head>
<style>
#navMenu{
margin:0;
padding:0;
}
#navMenu ul{
margin:0;
padding:0;
}
#navMenu li{
margin-right:2px;
padding:0;
list-style:none;
float:left;
position:relative;
background:#CCC;
}
#navMenu ul li a{
text-align:center;
font-family:sans-serif, cursive;
text-decoration:none;
height:30px;
width:150px;
display:block;
color:#000;
border:10px;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s;
}
#navMenu ul ul{
position:absolute;
visibility:hidden;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s;
}
#navMenu ul li:hover ul{
visibility:visible;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s;
}
</style>
</head>
<body>
<div id="wrapper"><!--beginning of wrapper div-->
<div id="navMenu"><!--Beginning of Nav Menu-->
<ul><!--Beginning of main UL-->
<li><a href="#">About Us</a>
<ul><!--Begining of Internal UL-->
<li><a href="#">Link item </a></li>
<li><a href="#">Link item </a></li>
<li><a href="#">Link item </a></li>
<li><a href="#">Link item </a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul><!--End of Main UL --></div>
</div>
<p> </p>
</body>
</html>
Thanks in advance :)
提前致谢 ：）
Regards,
问候，
Joseph
约瑟夫
采纳答案by Maxim Ershov
you can use css transition-delay property as follows:
您可以使用 css transition-delay 属性如下：
transition-delay: 1s; /* delays for 1 second */
-webkit-transition-delay: 1s; /* for Safari & Chrome */
Find more info here http://www.w3schools.com/cssref/css3_pr_transition-delay.asp
在此处查找更多信息http://www.w3schools.com/cssref/css3_pr_transition-delay.asp
回答by Edward
You can add an easein the transition.
您可以ease在过渡中添加一个。
transition: all .4s ease;
-webkit-transition: all .4s ease;
回答by Joe
You can use the transition-delayproperty for this.
您可以transition-delay为此使用该属性。
Update
更新
Since you want the animation to complete in one second, you simply need to state that as your duration. For example: transition: background-color 1s linear;
由于您希望动画在一秒钟内完成，您只需将其声明为您的持续时间。例如： transition: background-color 1s linear;
回答by Aaron Gray
If you want the sub menu to take 1 second to drop down, rather than it delaying for 1 second before it drops down, one option for complete control over acceleration and movement (if you want to get fancy) is to use CSS animationsand @keyframes.
如果您希望子菜单需要 1 秒才能下拉，而不是在它下降之前延迟 1 秒，完全控制加速和移动的一种选择（如果您想花哨的话）是使用CSS 动画和@关键帧。
Here is a cool demoshowing off the level of control you have with CSS animations.
这是一个很酷的演示，展示了您对 CSS 动画的控制水平。
回答by Paulie_D
Because you are using visibility:hidden, this cannot be transitioned as you might think...it only has an on and off state.
因为您正在使用visibility:hidden，所以不能像您想象的那样转换...它只有打开和关闭状态。
What you can do is combine it with opacityand use transition delays to offset the appearance until the opacity has kicked in.
你可以做的是将它与opacity并使用过渡延迟来抵消外观，直到不透明度开始。
