Question

现在我正式绝望了。我买了一个脚本在我的网站上使用MegaMenu。脚本是MegaNavBar 2.2 http://preview.codecanyon.net/item/meganavbar-v-220-advanced-mega-menu-for-bootstrap-30/full_screen_preview/8516895?_ga=2.119686542.744579007.1495443523-2131821405.1495443282

我希望脚本在悬停时打开子菜单，所以我按照演示页面（见上文）中的说明对其进行了配置。

这很好用。但是我想添加一个延迟，因为它是令人恼火的用户，如果他们从上到下移动鼠标指针，并且每次在悬停时立即打开菜单。

我尝试了什么：

寻求支持 - 没有答案
尝试添加动画和动画延迟动画正在运行，但延迟不起作用，我假设是因为“display：block”
尝试添加转换转换不起作用，因为Transition不使用“display：block”。

那里有人，谁可以帮我这些东西？

这是我的Bootply： https://www.bootply.com/A50M0Wk9NK

（假定的css规则在粘贴的css-code的第29行）

最诚挚的问候，迈克尔

Answer 1

您可以尝试使用“可见性”而不是“显示”，从而使用过渡。 e.g：

div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
  transition-delay:2s;  //set delay here
}

CSS：在悬停时向子菜单下拉添加延迟（Bootstrap 3 / MegaNavbar 2.2）

1 个答案: