在下拉菜单中延迟悬停Javascript CSS答案

【问题标题】：Delay Hover In Dropdown Menu Javascript CSS在下拉菜单中延迟悬停Javascript CSS
【发布时间】：2021-02-24 00:50:02
【问题描述】：

我在导航栏中创建可悬停的下拉菜单时遇到了一些问题。我对 javascript 和 css 很陌生，但有其他语言的背景。我不知道如何延迟我的下拉菜单变得可见。现在，我的下拉菜单会立即显示您将鼠标悬停在父菜单上的那一刻。我正在使用它作为描述模板，它是解决这个问题的理想选择。

我尝试过使用过渡和调整我的代码，但我找不到正确的方法来做到这一点。我怀疑一个原因是显示：阻塞。我遗漏了任何试图实现延迟的代码。这是菜单的原始代码。

这是我的代码：

                        ul{
                            border-style: groove;
                            padding: 0;
                            list-style: none;
                            background: #f2f2f2;
                        }
                        ul li{
                            display: inline-block;
                            position: relative;
                            line-height: 21px;
                            text-align: left;
                        }
                        ul li a{
                            display: block;
                            padding: 8px 25px;
                            color: #333;
                            text-decoration: none;

                        }
                        ul li a:hover{
                            color: #fff;
                    background-color:#939393;
                  
                        }
                        ul li ul.dropdown{
                            min-width: 100%; /* Set width of the dropdown */
                            background: #f2f2f2;
                            display: none;
                            position: absolute;
                            z-index: 999;
                            left: 0;
                        }
                        ul li:hover ul.dropdown{
                            display: block; /* Display the dropdown */
                        }
                        ul li ul.dropdown li{
                            display: block;
                        }

【问题讨论】：

您是否希望它显示缓慢，例如淡入？还是稍等片刻然后立即显示？
我希望它等待一段时间，然后稍微淡入。也许 0.2 秒淡入。所以我猜两者都有。现在它会立即显示下拉菜单，并且由于它是描述包装器的一部分，有时用户希望向下滚动页面以查看更重要的信息而不弹出任何菜单。
好吧，如果你想要一个淡入淡出类型的效果，你可能不得不将 transition opacity 属性从 0 变为 1。你不能 transition（动画）css display属性
好的，谢谢您的信息。我正在尝试实现这一点，但我仍然遇到了麻烦。知道如何使用我拥有的当前代码来实现它吗？

标签： javascript css menu hover dropdown

【解决方案1】：

在 CSS 中：

ul li ul.dropdown.show{
  display:block;
}

在 JavaScript 中：

const dropdowns = document.querySelectorAll('ul li ul.dropdown');
for(let q of dropdowns){
  q.onmouseenter = function(){
    setTimeout(()=>{ 
      this.classList.add('show'); 
    }, 1000);
  }
  q.onmouseleave = function(){
    this.classList.remove('show');
  }
}

这只是一个基本概念。我会使用 CSS transition。

【讨论】：