I would like to clean this jQuery code up, any suggestions?
<p>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.</p>

<pre><code>$("#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");       
        }); 
</code></pre>
