Question

我正在尝试使用mouseenter和mouseleave将动画添加到水平菜单栏。 Jquery不会回应。我不确定问题是什么。我的jquery，css和html看起来像这样：请帮忙。

<script type="text/javascript">

    $(function() {
      $('#menu a').mouseenter(function () {
        $(this).switchClass('style1', 'style2', 500);
      });

  $('#menu a').mouseleave(function () {
        $(this).switchClass('style2', 'style1', 500);
      });

});

</script>

<style type="text/css">
  #menu {
             padding: 10px 0 10px 0;background-color: black;   
            }

      .style1 {
           font: 14px Verdana, sans-serif; font-weight: bold;
       padding: 10px 30px 10px 30px;
               color: white; background: gray;
               text-decoration: none;        
              }

      .style2 {
               background-color: red;
       font: 14px Verdana, sans-serif; font-weight: bold;
       padding: 10px 30px 10px 30px; color: white;
               text-decoration: none;        
              } 
     </style>

     </head>    

     <body>
         <div id="menu">   
        <a class="style1" href="#">HOME</a>
        <a class="style1" href="#">ABOUT</a>
        <a class="style1" href="#">WHY KC3</a>
        <a class="style1" href="#">TESTIMONIALS</a>
        <a class="style1" href="#">ADVERTISE</a>
        <a class="style1" href="#">LOG IN</a>
        <a class="style1" href="#">CONTACT</a>  
         </div>
     </body>

水平菜单栏动画不工作

0 个答案: