CSS - 缓慢悬停效果

时间:2013-10-19 18:25:37

标签: html css

我正在创建一个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>&nbsp;</p>

</body>

</html>

提前致谢:)

此致

约瑟夫

5 个答案:

答案 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属性。

fiddle

<强>更新

由于您希望动画在一秒钟内完成,因此您只需将其表示为持续时间。例如:transition: background-color 1s linear;

updated fiddle

答案 3 :(得分:1)

如果您希望子菜单需要1秒钟才能下拉,而不是在它下降之前延迟1秒,那么完全控制加速度和移动的一个选项(如果您想获得幻想)是使用{ {3}}和CSS animations

这是@keyframes,展示了CSS动画的控制级别。

答案 4 :(得分:0)

因为您使用的是visibility:hidden,所以无法按照您的想法进行转换...它只有开启和关闭状态。

您可以做的是将其与opacity结合使用,并使用转换延迟来抵消外观,直到不透明度开始。

下面。 http://www.greywyvern.com/?post=337