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

debugcn 发表于 Dev

丑虫

我希望能够根据用户将鼠标移到某些区域上来添加和删除类。以下是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的JavaScript，<li>以更改内的链接类<li>：

  <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>

我已经检查过控制台，看来该事件甚至没有触发代码正常工作。任何帮助是极大的赞赏。

什里尼瓦斯·舒克拉（Shrinivas shukla）

看看这个小提琴。

这是代码段。（我添加alert了enter和leave用于测试的事件）。

$(document).ready(function() {
  $('#site-navigation li').mouseenter(function() {
    alert("Enter " + $(this).text());

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

  });


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

    alert("Leave " + $(this).text());

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

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。