jQuery: is there a way to make this code more compact?
<p>If you mouseover class1a, then the CSS of class2a and class2b change.  </p>

<p>It's the same pattern over and over again but the class names keep changing.</p>

<p>It's resulting in a lot of code..I'm wondering if there's a way to use jQuery to make it more 
compact?</p>

<p>Note, I am obviously willing to change the class names...just have to be able to distinguish them as you see in this code...</p>

<pre><code>$('.class1a').mouseover(function(){
   $('.class2a, .class2b').css( {height : '50px' , top: '75px'});
}).mouseout(function(){
    $('.class2a, .class2b').css({height : '25px' , top: '100px'});
  });

$('.class1b').mouseover(function(){
   $('.class2c, .class2d').css({height : '50px' , top: '75px'});
}).mouseout(function(){
    $('.class2c, .class2d').css({height : '25px' , top: '100px'});
  });
</code></pre>
