我正在创建一个CSS动态菜单,并希望延迟悬停动作。菜单在悬停在其链接上时的反应是提供子菜单(下拉菜单)。
我想减慢下拉过程,以便子菜单不会立即显示,但需要1秒才能下拉。非常感谢帮助。
代码如下:
<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>
提前致谢:)
此致
约瑟夫
答案 0 :(得分:10)
您可以使用css transition-delay属性,如下所示:
transition-delay: 1s; /* delays for 1 second */
-webkit-transition-delay: 1s; /* for Safari & Chrome */
在此处查找更多信息http://www.w3schools.com/cssref/css3_pr_transition-delay.asp
答案 1 :(得分:8)
您可以在转换中添加ease
。
transition: all .4s ease;
-webkit-transition: all .4s ease;
答案 2 :(得分:6)
您可以使用transition-delay
属性。
<强>更新强>
由于您希望动画在一秒钟内完成,因此您只需将其表示为持续时间。例如:transition: background-color 1s linear;
答案 3 :(得分:1)
如果您希望子菜单需要1秒钟才能下拉,而不是在它下降之前延迟1秒,那么完全控制加速度和移动的一个选项(如果您想获得幻想)是使用{ {3}}和CSS animations。
这是@keyframes,展示了CSS动画的控制级别。
答案 4 :(得分:0)
因为您使用的是visibility:hidden
,所以无法按照您的想法进行转换...它只有开启和关闭状态。
您可以做的是将其与opacity
结合使用,并使用转换延迟来抵消外观,直到不透明度开始。