代码之家 › 专栏 › 技术社区 › Weebs

为什么.hover()不能用于Animate.css?

megamenu animate.css jquery-hover css jquery

Weebs · 技术社区 · 6 年前

只有当animate.css类“animated”和“bounceIn”在代码中时才会发生这种情况。当它们被删除,并且只添加了类“show”时,菜单在悬停时不会隐藏,并且工作正常。

在.hover()中使用animate.css有什么特别之处吗?

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');
  });

1 回复 | 直到 6 年前

××× × ×××× 6 年前

只能使用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>

推荐文章

Weebs · 如何将类添加到元素并将其保持在那里,直到鼠标离开动画。css?

7 年前

onda47 · jQuery one()处理程序执行了两次

7 年前

Nydigov · 动画文本以错误的顺序设置动画

7 年前

Dust_In_The_Wind · 使有生气css震动效果每次都不起作用

8 年前

SergkeiM · Bootstrap Carousel转换项目+animate.css

9 年前

Simon Rook · 背景图像未正确淡入

9 年前

That guy · 如何使用HTML和CSS制作简单的计时器图像幻灯片

9 年前

CookieM · 使有生气css不工作不知道为什么?

9 年前

S J Paul Chowdhury · CSS3简单文本动画,滚动时与固定导航栏重叠,尽管文本的内容区域没有?

9 年前

chrislhardin · 应用多个类,延迟介于

10 年前