悬停，悬停，被击打

var boxes = $(\'#box_1, #box_2, #box_3, #box_4\');
boxes.hover(function() {
    $(this).addClass(\'hover\');
}, function() {
    if (!$(this).data(\'clicked\'))
        $(this).removeClass(\'hover\');
}).click(function(){

    boxes.not(this).removeClass(\'hover\').data(\'clicked\',false);;
    $(this).data(\'clicked\',true);

});

#box_1:hover, #box_1.hover,
#box_2:hover, #box_2.hover,
#box_3:hover, #box_3.hover,
#box_4:hover, #box_4.hover {
    ...
}

$(\'#box_1, #box_2, #box_3, #box_4\').click(function() {
    $(this).addClass(\'hover\');
});

:hover

$(\'#box_1, #box_2, #box_3, #box_4\').mouseover(function(){
   $(this).addClass(\'hover\');
}).mouseout(function(){
   $(this).removeClass(\'hover\');
});

var currentSelected = null;

$(\'#box_1, #box_2, #box_3, #box_4\').click(function(){
     currentSelected = this.id;   
});

$(\'#box_1, #box_2, #box_3, #box_4\').hover(function(){
    if (this.id !== currentSelected){
        $(this).addClass(\"hover\");
    }
},
function(){
    if (this.id !== currentSelected){
        $(this).removeClass(\"hover\");
    }
});

$(\"#box-1, #box-2, #box-3\").hover(function() {
    $(this).addClass(\"hover\");
}, function() {
    $(this).removeClass(\"hover\");
});

$(\"#box-1, #box-2, #box-3\").click(function() {
    $(this).toggleClass(\"hover-clicked\");
});

.hover {color:red;}
.hover-clicked {color:red;}