Question

我希望将徽标悬停在鼠标上以显示下拉菜单，但是当我将鼠标悬停在其上时，它会立即消失，这使得访问它非常困难。（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代码，以在鼠标悬停时添加类，并在鼠标悬停时删除超时。

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

1 个答案: