title: Want to improve my jQuery code, does what I want, just too ugly, IMO
body: <p>so I have this jQuery script below that works.  But since I'm just learning jQuery, I'd like to take advantage of this working code and make it more terse.</p>
  
  <p>Basically it removes a class which holds a background image, then makes a div visible which is a link to an area of the site.  It seems overly repetitive to me.  Thanks for the helppp.</p>
  
  <p>THE CODE: </p>
  
  <pre><code>$(document).ready(function(){
      $('#res').live('mouseover',function(){
          $(this).removeClass('resume');
          $('#reslin').css('visibility','visible');   
      });
  
      $('#res').live('mouseout',function(){
          $(this).addClass('resume');
          $('#reslin').css('visibility','hidden');;   
      });
  
      $('#pro').live('mouseover',function(){
          $(this).removeClass('projects');
          $('#prolin').css('visibility','visible');
      });
  
      $('#pro').live('mouseout',function(){
          $(this).addClass('projects');
          $('#prolin').css('visibility','hidden');
      });
  
      $('#abo').live('mouseover',function(){
          $(this).removeClass('about');
          $('#abolin').css('visibility','visible');
      });
  
      $('#abo').live('mouseout',function(){
          $(this).addClass('about');
          $('#abolin').css('visibility','hidden');
      });
  
      $('#con').live('mouseover',function(){
          $(this).removeClass('contact');
          $('#conlin').css('visibility','visible');
  
      });
  
      $('#con').live('mouseout',function(){
          $(this).addClass('contact');
          $('#conlin').css('visibility','hidden');
      });
  });
  </code></pre>