为什么 .hover() 不能与 Animate.css 一起使用？

Question

我正在创建一个大型菜单。一切都很好，除了当鼠标悬停在菜单本身上时——当它与动画一起出现后——菜单然后隐藏。

只有当 animate.css classes "animated" 和 "bounceIn" 在代码中时才会发生这种情况。当它们被移除并且只添加 class "show" 时，菜单在悬停时不会隐藏并且可以正常工作。

将 animate.css 与 .hover() 结合使用是否有特殊之处？

HTML

<div class="nav">
    <ul>
        <li class="wsite-nav-1">Home</li>
    </ul>
    <div class="mega-menu">
          <div class="menu-1 menu">Mega Menu</div>
    </div>
</div>

CSS

.menu {
  border:1px solid #004698;
  padding:2em;
  box-sizing:border-box;
  display:none;
}
.menu.show {
  display:block;
}

jQuery

  // Mega Menu
  $('.menu-1, .wsite-nav-1').hover(function() {
    $('.menu-1.menu').addClass('show animated bounceIn');
  },function() {
    $('.menu-1.menu').removeClass('show animated bounceIn');
  });

Answer 1

您只能使用如下所示的 css 并将 .mega-menu 移到 li

中

.menu {
  border:1px solid #004698;
  padding:2em;
  box-sizing:border-box;
  display:none;
}

.wsite-nav-1:hover .menu{
    display:block;
    -webkit-animation: bounceIn 1s;
    animation: bounceIn 1s;
}

 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css">
<div class="nav">
    <ul>
        <li class="wsite-nav-1">Home
          <div class="mega-menu">
            <div class="menu-1 menu">Mega Menu</div>
          </div>
        </li>
    </ul>
</div>

为什么 .hover() 不能与 Animate.css 一起使用？

Why isn't .hover() working with Animate.css?

jquery

css

jquery-hover

animate.css

megamenu