Question

I would like to clean this jQuery code up, any suggestions? I have about 20 cities to add. This code adds CSS class to each city when rolled over area on a map.

$("#Auckland").mouseover(function(){                                                
                $(".Auckland").addClass("area");        
        }); 

        $("#Auckland").mouseout(function(){                                             
                $(".Auckland").removeClass("area");     
        }); 

        $("#Northland").mouseover(function(){                                               
                $(".Northland").addClass("area");       
        }); 

        $("#Northland").mouseout(function(){                                                
                $(".Northland").removeClass("area");        
        }); 

        $("#Rodney").mouseover(function(){                                              
                $(".Rodney").addClass("area");      
        }); 

        $("#Rodney").mouseout(function(){                                               
                $(".Rodney").removeClass("area");       
        }); 

Answer 1

$('#Auckland,#Northland,#Rodney').hover(function(){
     $('.'+this.id).addClass("area");
},function(){
     $('.'+this.id).removeClass("area");
});