我正在创建一个大型菜单。一切正常,除了鼠标悬停在菜单本身上时(与动画一起出现之后),然后菜单会隐藏。
仅当animate.css类“ animated”和“ bounceIn”在代码中时,才会发生这种情况。删除它们后,仅添加了“ 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');
});
答案 0 :(得分:2)
您只能按以下方式使用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>