Question

所以我是jquery的新手而且我在乱搞但是我遇到了一个问题。

我有5个元素的这个菜单栏，当我将鼠标悬停在每个元素上时，我想为每个元素添加一个类。

示例：当我将鼠标悬停在“菜肴”上时，我想添加活动类，但其他4个元素应该使该类处于非活动状态。每当我徘徊时，我想删除这些课程。我怎么做？

提前感谢！

jquery的

   $( document ).ready(function() {
     $("nav").hover(
       function () {
          $(this).addClass("active");
       },
       function () {
          $(this).removeClass("active");
      }
     );
    });

HTML

    <header>
<h1>Sushi Lovers</h1>
<nav>
    <ul class="nav">
    <li> <a href="#">Dishes</a> </li>
    <li> <a href="#">Lunch</a> </li>
    <li> <a href="#">Diner</a> </li>
    <li> <a href="#">Reservations</a> </li>
    <li> <a href="#">Contact us</a> </li>
  </ul>
</nav>

Answer 1

您需要单独绑定悬停以获取锚标记

  $( document ).ready(function() {
     $("nav").find("a").hover(
       function () {
          $("nav").find("a").not(this).addClass("inactive")
          $(this).addClass("active");
       },
       function () {
          $(this).removeClass("active");
          $(".inactive").removeClass("active");
      }
     );
    });

Answer 2

您需要定位a标记以添加类

试试这个

    $(document).ready(function () {
    $("nav li a").hover(

    function () {
        $(this).addClass("active").parents('ul').find('li a').not($(this)).addClass('inactive');
    },

    function () {
        $(this).parents('ul').find('li a').removeClass('active inactive');
    });
});

DEMO

Answer 3

试试这个：

$(".nav li").hover(
   function () {
      $(this).siblings('li').removeClass('active').addClass('inactive');
      $(this).addClass("active");
   },
   function () {
      $('.active').removeClass("active");
      $('.inactive').removeClass("inactive");
  });

你可以像这样更新你的css：

li.active a{
  /* your css props */
}
li.inactive a{
  /* your css props */
}

jquery - 在悬停时为每个锚元素添加不同的类

3 个答案: