In jQuery what's the best way to add a class on mouseover and remove it on mouseout?

Question

Is there a jQuery shortcut for this?

$(element).on("mouseover", function() {
    $(this).addClass("hover");
}).on("mouseout", function() {
    $(this).removeClass("hover");
});

I see in the jQuery docs a method called hover(), but that seems to bind on events mouseenter and mouseleave (should I be using those events instead of mouseover and mouseout?)

Answer 1

Description

You can user jQuery's hover() method.

Check out the sample and this jsFiddle Demonstration

Sample

$(elem).hover(function(ev) {
    $(this).addClass('hover');
}, function(ev) {
    $(this).removeClass('hover');
});

More Information

• jsFiddle Demonstration
• jQuery.hover()

Answer 2

The simplest way, to remove duplication of code, is by passing one argument to hover and use toggleClass:

$(elem).hover(function() {
    $(this).toggleClass('hover');
});

Answer 3

Or:

$(element).hover(function () {
    $(this).addClass("hover");
}, function () {
    $(this).removeClass("hover");
});

Answer 4

hover() is only a bit more compact:

$(elem).hover(function(ev) {
    $(this).addClass('hover');
},function(ev) {
    $(this).removeClass('hover');
});

For the difference between mouseover/mouseout and mouseenter/mouseleave, see What is the difference between the mouseover and mouseenter events?