ID 찾기 및 애니메이션 클래스 추가

Question

약간 다른 메뉴 설정을 시도합니다. 내 모든 a 태그에는 ID가 있어야만 이동할 수 있습니다. 그러나 링크 위로 마우스를 가져 가면 아래쪽에 텍스트가있는 상자의 애니메이션을 적용해야합니다. jquery에서 지정된 ID를 찾고 애니메이션을 적용 할 클래스를 추가하려면 어떻게해야합니까?

http://jsfiddle.net/sgJUf/

HTML :

<div id="right_nav"> 
    <ul> 
     <li><a id="nav_1" href="#">#</a></li> 
     <li><a id="nav_2" href="#">#</a></li> 
     <li><a id="nav_3" href="#">#</a></li> 
     <li><a id="nav_4" href="#">#</a></li> 
     <li><a id="nav_5" href="#">#</a></li> 
     <li><a id="nav_6" href="#">#</a></li> 
     <li><a id="nav_7" href="#">#</a></li> 
     <li><a id="nav_8" href="#">#</a></li> 
     <li><a id="nav_9" href="#">#</a></li> 
    </ul> 
</div> 

CSS :

#right_nav { width:700px; height:auto; float:left;} 
#right_nav ul { width:100%; height:100%; margin:0; padding:0;} 
#right_nav ul li { list-style-type:none; float:left;} 
#nav_1 { width: 250px; height:160px; background-color:#33CCCC; margin: 0px 0 0 5px; position:absolute;} 
#nav_2 { width: 230px; height:400px; background-color:#66F; margin: -100px 0 0 260px; position:absolute;} 
#nav_3 { width: 250px; height:100px; background-color:#693; margin: 329px 0 0 447px; position:absolute;} 
#nav_4 { width: 200px; height:200px; background-color:#CC9; margin: 200px 0 0 29px; position:absolute;} 
#nav_5 { width: 190px; height:300px; background-color:#F9C; margin: 0 0 0 510px; position:absolute;} 
#nav_6 { width: 250px; height:200px; background-color:#CF0; margin: 450px 0 0 450px; position:absolute;} 
#nav_7 { width: 150px; height:200px; background-color:#F99; position:absolute; margin: 320px 0 0 250px;} 
#nav_8 { width: 220px; height:200px; background-color:#693; position:absolute; margin: 420px 0 0 0;} 
#nav_9 { width: 150px; height:100px; background-color:#693; position:absolute; margin: 540px 0 0 250px;} 
.hover { width:50px; height:25px; background-color:#993300; } 

jQuery를 :

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

다음

내 코드입니다

나는 처음 링크를 .Hover를 추가 할 수 있지만 다른 링크 위로 마우스를 실행하면 당신이 당신의 코드를 보면, 당신은, 당신은 모든 LI에 클래스를 추가하지 참조

Answer 1

작동하지 않습니다 네가 내놓은 사람. 이 시도 :

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

Answer 2

내가 당신의 마지막 CSS 라인을 변경합니다 :

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

그래서 당신은 그렇게 할 어떤 JS 필요하지 않습니다.

나는 이것이 실제로 당신이 찾고있는 것인지 모르겠다. What/Where는 "움직이는" "상자"입니까? 이 줄에 뭔가가있을 수 있습니다.

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