如何使metisMenu在鼠标悬停时自动展开

How to make metisMenu auto expand on mouse hover?

本文关键字：悬停 何使 metisMenu 鼠标      更新时间：2024-01-06

我使用metisMenu作为管理员面板。我想让我的侧边栏菜单在鼠标悬停时以平滑的速度自动扩展。我正在使用二进制血红素的免费软件高级管理模板。我已经使用以下CSS代码在鼠标上进行了自动扩展，但扩展速度非常高，不在我的控制之下。

用于自动展开的CSS代码

.nav li:hover > ul {
    display: block;
}

上面的代码可以工作，但为了增加扩展延迟，我使用了jQuery，但这不起作用。

我的jQuery代码：

$('.nav li').hover(function(){
    $('li').delay(1000).fadeIn('slow');
});

我也使用过渡效果transition:all 200ms ease-in-out 0s !important;使平滑的自动展开，但这不起作用。

MetisMenu支持animate.css动画，如下所示：

<ul class="animated bounce"> ... </ul>

您还需要在文档中包含animate.min.css：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />

如果它不起作用，请尝试通过暂时禁用模板中的其他CSS文件来消除任何冲突，以缩小问题范围。

示例/Fiddle

悬停示例。

相关文章：