html - 如何延迟下拉菜单触发器的淡出？

Question

我希望悬停在 Logo 上以显示下拉菜单，但是当我悬停时它会立即消失，因此很难访问它。 ( https://imgur.com/6AQIqfC )

我研究了一段时间，似乎没有任何效果。我能找到的所有内容都告诉我使用 transition 和 transition delay CSS 属性，但它似乎不起作用

.dropdown:hover>.dropdown-menu{
    transition: .5s all;
    transition-delay: 5s;
    display: block;
}

    <!-- NAVBAR -->
    <nav class="navbar fixed-top">   
        <div class="nav-logo dropdown">
            <svg>
               LOGO GOES HERE
            </svg>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
            </div>
        </div>
    </nav>       

悬停后下拉菜单应该停留大约 5 秒，但它没有做任何事情

Answer 1

实际上你不能添加过渡延迟，因为 display 属性在 CSS 中没有动画。

您可以做的是添加简单的 JS 代码以在鼠标悬停时添加类并在鼠标移出时删除超时。