Jquery 查找ID并添加动画类

我试着做一个稍微不同的菜单设置。 我所有的a标签都必须有一个ID，这样才能四处移动。但是，当你把鼠标放在链接上时，它应该会在底部有一些文本的地方设置一个框的动画。 如何让jquery找到指定的id，然后添加一个类来制作动画

这是我的密码：

HTML:

jQuery：

$(document).ready(function() {     
    $("#right_nav ul li").hover(function(){     
        $('#right_nav ul li').addClass("hover");    
    },
    function(){    
        $('#right_nav ul li').removeClass("hover");     
    });
});

---

我可以添加。将鼠标悬停在第一个链接上，但如果我将鼠标悬停在其他链接上，它将不起作用。

如果查看代码，您会看到您正在将类添加到所有LI，而不是您悬停的LI。试试这个：

$(document).ready(function() {     
    $("#right_nav ul li").hover(function(){
        $(this).addClass("hover");    
    },     
    function(){    
        $(this).removeClass("hover");     
    });
}); 

---

我将使用以下命令更改您的最后一行CSS：

#right_nav ul li:hover { width:50px; height:25px; background-color:#993300; }

所以你不需要任何JS来做这件事

我不知道这是否真的是你想要的。您尝试设置动画的长方体是什么/在哪里？大概是这样的：

$(document).ready(function() {     
    $("#right_nav ul li").hover(function(){
        //gets the hovered element's id
        var hovered_li_id = $(this).attr('id'); 

        //adds .hover to an element with id "hoverbox_nav_X" and then eventually animates it
        $('#hoverbox_'+hovered_li_id).addClass('hover').animate( /*...*/ );
    },
    function(){
        //removes .hover from wherever it was set and eventually resets any css the animation modified.
        $('.hover').removeClass('hover').css( /*...*/ );
    });

---

如果我这样做，它会起作用$document.readyfunction{$right_nav ul li a.hover函数{$this.addClasshover；}，函数{$this.removeClasshover；}；}；但是我现在可以看到，我必须有一个隐藏的类，当你悬停在链接上时，它就会变得可见

#right_nav ul li:hover { width:50px; height:25px; background-color:#993300; }

$(document).ready(function() {     
    $("#right_nav ul li").hover(function(){
        //gets the hovered element's id
        var hovered_li_id = $(this).attr('id'); 

        //adds .hover to an element with id "hoverbox_nav_X" and then eventually animates it
        $('#hoverbox_'+hovered_li_id).addClass('hover').animate( /*...*/ );
    },
    function(){
        //removes .hover from wherever it was set and eventually resets any css the animation modified.
        $('.hover').removeClass('hover').css( /*...*/ );
    });