CSS - 慢速悬停效果答案

【问题标题】：CSS - Slow Hover effectCSS - 慢速悬停效果
【发布时间】：2021-12-01 15:21:40
【问题描述】：

我正在创建一个 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>

提前致谢:)

问候，

约瑟夫

【问题讨论】：

1s 实际上是一个非常长的时间，并且可以说，对于悬停来说，这将是糟糕的用户体验。
也许我还不够清楚。我不希望子菜单在 1 秒后出现，鼠标悬停在按钮上。我希望它需要 1 秒钟的时间来下拉菜单。
也许你应该编辑你的帖子。不过，只需将转换中的时间声明为 1 秒即可。

标签： html css

【解决方案1】：

您可以在转换中添加ease。

transition: all .4s ease;
-webkit-transition: all .4s ease;

【讨论】：

这就是我要找的。逐渐地，慢慢地改变组件。谢谢！
完美。只是我正在寻找的解决方案。谢谢。
一个可靠的。我肯定会更喜欢你的解决方案，而不是那里接受的解决方案。

【解决方案2】：

您可以按如下方式使用 css 转换延迟属性：

transition-delay: 1s; /* delays for 1 second */
-webkit-transition-delay: 1s; /* for Safari & Chrome */

在此处查找更多信息http://www.w3schools.com/cssref/css3_pr_transition-delay.asp

【讨论】：

【解决方案3】：

您可以为此使用transition-delay 属性。

fiddle

更新

由于您希望动画在一秒钟内完成，您只需将其声明为您的持续时间。例如：transition: background-color 1s linear;

updated fiddle

【讨论】：

也许我还不够清楚。我不希望子菜单在 1 秒后出现，鼠标悬停在按钮上。我希望它需要 1 秒钟的时间来下拉菜单。
过渡：背景色1s线性；是我搜索的最佳答案...

【解决方案4】：

如果您希望子菜单在 1 秒内下拉，而不是在下拉前延迟 1 秒，则完全控制加速和移动的一个选项（如果您想花哨的话）是使用 @ 987654321@和@keyframes。

这是一个cool demo，展示了您对 CSS 动画的控制水平。

【讨论】：

【解决方案5】：

因为你使用的是visibility:hidden，所以它不能像你想象的那样转换……它只有一个开和关状态。

您可以将它与opacity 结合使用，并使用过渡延迟来抵消外观，直到不透明度开始。

这里。 http://www.greywyvern.com/?post=337

【讨论】：

【解决方案6】：

检查这个有效的演示

.transition{
    transition: all .4s;
    -moz-transition: all .4s;
    -webkit-transition:all .4s;
    -o-transition: all .4s;
    
    margin-top:20px;
    border:1px solid gray;   
    width:80px;
    padding:10px;
    margin-left:50px;
    position:relative; 
    cursor:pointer;
}

.hover_top{ 
    top:0;
}
.hover_top:hover{
    top:-10px;
}

.hover_left{    
    left:0;
}
.hover_left:hover{
    left:-10px;
}

.hover_right{   
    right:0;
}
.hover_right:hover{
    right:-10px;
}

 <div class="hover_top transition"> Hover Top </div>
 <div class="hover_left transition"> Hover Left </div>
 <div class="hover_right transition"> Hover Right </div>

【讨论】：