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

Question

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

我研究了一段时间，似乎没有任何效果。我能找到的所有内容都告诉我使用过渡和过渡延迟 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 代码以在鼠标悬停时添加 class 并在鼠标移出时删除超时。

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

How can I delay fadeout of a dropdown menu trigger?

html

css

delay

hover

bootstrap-4