Question

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

But when I clicked, “HOVER” class = .removeClass('hover')

Anyway to stay this “HOVER” class when I clicked ?

http://jsfiddle.net/EAa6p/ (This is my original)

---

DONE ! by Ben <3
http://jsfiddle.net/EAa6p/1/
Thanks you all

Answer 1

I think you mean to persist the hover class when a click occur.

The best option is to use data() to save the state and check on the hover out

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

});

Is that what you wanted?

http://jsfiddle.net/uhc9S/