Question

If you mouseover class1a, then the CSS of class2a and class2b change.

It’s the same pattern over and over again but the class names keep changing.

It’s resulting in a lot of code..I’m wondering if there’s a way to use jQuery to make it more
compact?

Note, I am obviously willing to change the class names…just have to be able to distinguish them as you see in this 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'});
  });

Answer 1

you can predefine variables with selectors and css objects that have multiple occurances, also you can use .hover() method

var s1 = '.class2a, .class2b';
var s2 = '.class2c, .class2d';
var css1 = {height : '50px' , top: '75px'};
var css2 = {height : '25px' , top: '100px'};

$('.class1a').hover(function(){
    $(s1).css(css1);
}, function(){
    $(s1).css(css2);
});

$('.class1b').hover(function(){
    $(s2).css(css1);
}, function(){
    $(s2).css(css2);
});