Эффекты при наведении на красный, синий и зеленый коробки


Я создал jQuery скрипт, чтобы проиллюстрировать некоторые моменты моего обучения, но у меня возникли проблемы, уменьшая его.

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

Все работает как надо, но я знаю, что есть способ похудеть в "removeClass" части в один ряд. Я с трудом вспоминали, как это сделать. Идея в том, чтобы все поле наведении на красный, а цвета следуют в порядке: красный, синий и зеленый.

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


252
2
задан 14 июля 2011 в 04:07 Источник Поделиться
Комментарии
2 ответа

Немного короче:

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

3
ответ дан 14 июля 2011 в 04:07 Источник Поделиться

Дом на BumleB2na. Неоднократные звонки в добавление казался облаком цель кода с небезынтересные подробности.

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

3
ответ дан 18 июля 2011 в 11:07 Источник Поделиться