A little shorter (please mark as correct on stackoverflow.com if this helped):
$(document).ready(function() {
var red = $(".small-box");
var blue = $(".small-box2");
var green = $(".large-box");
var boxes = red.add(blue).add(green);
boxes.mouseleave(function() {
boxes.removeClass("selected-highlight selected-highlight2 selected-highlight3");
});
red.mouseenter(
function () {
red.addClass("selected-highlight");
blue.addClass("selected-highlight2");
green.addClass("selected-highlight3");
}
);
blue.mouseenter(
function () {
red.addClass("selected-highlight3");
blue.addClass("selected-highlight");
green.addClass("selected-highlight2");
}
);
green.mouseenter(
function () {
red.addClass("selected-highlight2");
blue.addClass("selected-highlight3");
green.addClass("selected-highlight");
}
);
});