How do I unbind "hover" in jQuery?
Unbind the mouseenter
and mouseleave
events individually or unbind all events on the element(s).
$(this).unbind('mouseenter').unbind('mouseleave');
or
$(this).unbind(); // assuming you have no other handlers you want to keep
$(this).unbind('mouseenter').unbind('mouseleave')
or more succinctly (thanks @Chad Grant):
$(this).unbind('mouseenter mouseleave')
Actually, the jQuery documentation has a more simple approach than the chained examples shown above (although they'll work just fine):
$("#myElement").unbind('mouseenter mouseleave');
As of jQuery 1.7, you are also able use $.on()
and $.off()
for event binding, so to unbind the hover event, you would use the simpler and tidier:
$('#myElement').off('hover');
The pseudo-event-name "hover" is used as a shorthand for "mouseenter mouseleave" but was handled differently in earlier jQuery versions; requiring you to expressly remove each of the literal event names. Using $.off()
now allows you to drop both mouse events using the same shorthand.
Edit 2016:
Still a popular question so it's worth drawing attention to @Dennis98's point in the comments below that in jQuery 1.9+, the "hover" event was deprecated in favour of the standard "mouseenter mouseleave" calls. So your event binding declaration should now look like this:
$('#myElement').off('mouseenter mouseleave');