ID suchen und Animationsklasse hinzufügen

Question

Ich versuche, eine etwas andere Menüeinstellung vorzunehmen. Alle meine a-Tags müssen eine ID haben, damit sie verschoben werden können. Aber wenn Sie mit der Maus über den Link fahren, sollte es ein Feld von unten animieren, wo sich ein Text befindet. Wie kann ich jquery die angegebene ID finden und dann eine Klasse zum Animieren hinzufügen?

Hier ist mein Code:

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");  
    }); 
}); 

kann ich .hover auf dem ersten Link hinzufügen, aber wenn ich die Maus über den anderen Links führen es nicht

Answer 1

arbeiten, wenn Sie auf den Code schauen, sehen Sie, Sie hinzufügen, um die Klasse zu der LI ALL, nicht der, den du schwebst. Versuchen Sie folgendes:

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

Answer 2

Ich würde mit dem letzten CSS Zeile:

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

Sie müssen also keine JS, das zu tun.

Ich weiß nicht, ob das tatsächlich das ist, wonach Sie suchen. Was/wo ist die "Box", die du "animieren" willst? Etwas in dieser Richtung vielleicht:

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