Hover effects for red, blue, and green boxes

Question

I've created a JQuery script to help illustrate a few points for my teaching class, but I have having trouble slimming it down.

$(document).ready(function() {
    var red = $(".small-box");
    var blue = $(".small-box2");
    var green = $(".large-box");
    red.hover(
        function () {
            red.addClass("selected-highlight");
            blue.addClass("selected-highlight2");
            green.addClass("selected-highlight3");
        },
        function () {
        red.removeClass("selected-highlight");
            blue.removeClass("selected-highlight2");
            green.removeClass("selected-highlight3");
       }
    );
    blue.hover(
        function () {
            red.addClass("selected-highlight3");
            blue.addClass("selected-highlight");
            green.addClass("selected-highlight2");
        },
        function () {
            red.removeClass("selected-highlight3");
            blue.removeClass("selected-highlight");
            green.removeClass("selected-highlight2");
       }
    );
    green.hover(
        function () {
            red.addClass("selected-highlight2");
            blue.addClass("selected-highlight3");
            green.addClass("selected-highlight");
        },
        function () {
            red.removeClass("selected-highlight2");
            blue.removeClass("selected-highlight3");
            green.removeClass("selected-highlight");
       }
    );
});

Everything works as it should, but I know there is a way to slim down the "removeClass" part to one single line. I am having trouble remembering how to do so. The idea is to whatever box you hover over is red and the colors follow accordingly in the order of: red, blue, and green.

.container-left {
    float:left;
}
.small-box {
    width:300px;
    height:300px;
    background-color:#FFF;
    border-top:1px #000 solid;
    border-left:1px #000 solid;
}
.small-box2 {
    width:300px;
    height:300px;
    background-color:#FFF;
    border-left:1px #000 solid;
    border-bottom:1px #000 solid;
    border-top:1px #000 solid;;
}
.container-right {
    float:left;
}
.large-box {
    width:300px;
    height:601px;
    background-color:#FFF;
    border:1px #000 solid;
}
.selected-highlight{
    background-color:red;
}
.selected-highlight2 {
    background-color:blue;
}
.selected-highlight3 {
    background-color:#00FF00;
}

Answer 1

A little shorter:

$(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");
        }
    );
});

Answer 2

Building on BumleB2na. The repeated calls to addClass seemed to cloud the intent of the code with the uninteresting details.

$(document).ready(function() {
    var red = $(".small-box");
    var blue = $(".small-box2");
    var green = $(".large-box");
    var boxes = red.add(blue).add(green);

    function highlight() { // optional params used, generalizable with a loop
        arguments[0].addClass("selected-highlight");
        arguments[1].addClass("selected-highlight2");
        arguments[2].addClass("selected-highlight3");
    }

    boxes.mouseleave(function() {
        boxes.removeClass("selected-highlight selected-highlight2 selected-highlight3");
    });

    red.mouseenter(
        function () {
            highlight(red, blue, green);
        }
    );
    blue.mouseenter(
        function () {
            highlight(blue, green, red);
        }
    );
    green.mouseenter(
        function () {
            highlight(green, red, blue);
        }
    );
});