Skip to main content

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

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

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");
        }
    );
});
Source Link

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