在mouseEnter上使用JavaScript向元素添加和删除类

我希望能够根据用户鼠标在特定区域上的移动来添加和删除类。以下是WordPress生成的导航代码：

    <nav id="site-navigation" class="main-navigation" role="navigation" data-small-nav-title="Navigation">
    <ul id="menu-new-blog-main-2" class="nav-bar clearfix">
    <li id="menu-item-10168" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10168"><a href="http://www.proformablog.com/about-proforma/">About Proforma</a></li>
    <li id="menu-item-10169" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10169"><a href="http://www.proforma.com">Proforma.com</a></li>
    <li id="menu-item-10170" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10170"><a href="http://proforma.com/contact.html">Contact Us</a></li>
    </ul>               
    </nav>

为了更改

中链接的类，我提出了以下针对
的JavaScript：

  <script>
  $(document).ready(function(){
  $('#site-navigation li').mouseenter(function(){   

    $(this).find('li.menu-item a').addClass('animated, bounceIn');
    //$(this).find('.span').addClass('fadeInUp');

    });


    $('#site-navigation li'').mouseleave(function(){    

    $('#site-navigation li'').find('li.menu-item a').removeClass('animated, bounceIn');
    //$('#site-navigation li').find('.span').removeClass('animated, fadeInUp');

    });
  });   
  </script>


$（文档）.ready（函数（）{
$（#站点导航li'）.mouseenter（函数（）{
$（this）.find（'li.menu-item a'）.addClass（'animated，bounceIn'）；
//$（this.find（'.span'）.addClass（'fadeInUp'）；
});
$（“#站点导航li”）.mouseleave（函数（）{
$（“#站点导航li”）.find（'li.menu-item a'）.removeClass（'animated，bounceIn'）；
//$（“#站点导航li”）.find（“.span”）.removeClass（'animated，fadeInUp'）；
});
});   

我已经检查了控制台，看起来事件甚至没有触发代码。非常感谢您的帮助。
使用jQuery添加/删除类时，它们应该是空格分隔的，而不是逗号分隔的。因此：

$(this).find('li.menu-item a').addClass('animated bounceIn');

此外，您不应该将
mouseleave
嵌套在
mouseenter
函数中。此外，您应该在
上使用
$

此外，在事件处理程序中，您没有正确访问元素<代码>$（此）
指已输入或保留的元素。由于已在
元素上设置了鼠标指针处理程序，
$（this.find（'li.menu-item a'）
未找到任何内容

试试这个：

// It's often best practice to cache jQuery objects
// so you're not looking up the elements multiple times.
var $listItems = $('#site-navigation li');

$listItems.on('mouseenter', function(){   
  $(this).find('a').addClass('animated bounceIn');
});

$listItems.on('mouseleave', function(){   
  $(this).find('a').removeClass('animated bounceIn');
});

综上所述，如果您只是想在悬停状态下创建一个动画，那么只需在
元素上使用一个类，就可以在CSS中实现这一点。在这里，jQuery可能有点过头了

$('#site-navigation li'')

应该是

$('#site-navigation li')

或

（您有错误的引号）

并防止使用选择器的重复，请按如下操作：

var $el = $('#site-navigation li')

$el.mouseenter(function(){   
     $(this).find('li.menu-item a').addClass('animated bounceIn');
     $(this).find('.span').addClass('fadeInUp');
});

$el.mouseleave(function() {
      $(this).find('li.menu-item a').removeClass('animated bounceIn');
}

进一步阅读：

祝你好运，看看这个

下面是片段。（我在
enter
和
leave
事件中添加了
alert
，以进行测试）


$（文档）.ready（函数（）{
$（“#站点导航li”）.mouseenter（函数（）{
警报（“输入”+$（this.text（））；
$（this）.find（'li.menu-item a'）.addClass（'animated，bounceIn'）；
//$（this.find（'.span'）.addClass（'fadeInUp'）；
});
$（“#站点导航li”）.mouseleave（函数（）{
警报（“离开”+$（this.text（））；
$（“#站点导航li”）.find（'li.menu-item a'）.removeClass（'animated bounceIn'）；
//$（'#site-navigation li'）.find（'.span'）.removeClass（'animated，fadeInUp'）；
});
});









谢谢您的建议，但它仍然没有启动。您是否在控制台中看到任何错误？另外，您是否已将自己版本的jQuery排入队列，或者是否正在使用WordPress默认值？无论如何，您可以使用CSS3在不使用JavaScript的情况下实现所有这些。
var $el = $('#site-navigation li')

$el.mouseenter(function(){   
     $(this).find('li.menu-item a').addClass('animated bounceIn');
     $(this).find('.span').addClass('fadeInUp');
});

$el.mouseleave(function() {
      $(this).find('li.menu-item a').removeClass('animated bounceIn');
}