# Hover effects for red, blue, and green boxes

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 () {
},
function () {
red.removeClass("selected-highlight");
blue.removeClass("selected-highlight2");
green.removeClass("selected-highlight3");
}
);
blue.hover(
function () {
},
function () {
red.removeClass("selected-highlight3");
blue.removeClass("selected-highlight");
green.removeClass("selected-highlight2");
}
);
green.hover(
function () {
},
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;
}


A little shorter:

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

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

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


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

function highlight() { // optional params used, generalizable with a loop
}

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

• This is awesome. I had no idea you could pass unexpected params to a function like this, but I think it could get confusing if you do it often. When I want a function to have optional params, I specify them in the function definition and then check if optional params are != undefined. But still, very interesting that this can be done.. – BumbleB2na Jul 26 '11 at 14:22
• Glad that I've though you a new trick. I prefer explicit parameters as well. In this case the implicit optional parameters are just for show and because the name of the parameters did not just pop into my head :) – Aleksi Yrttiaho Jul 26 '11 at 19:51