jquery - 當懸停時爲每個錨元素添加不同的類

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

您需要爲目標的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 2

您需要爲錨標籤懸停綁定單獨

$(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 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 */ 
}