A repository of over 1000 quality jQuery plugins

jQuery JQuery Hover Delay

JQuery Hover Delay is a jQuery Hover plugin.

Created by John-terenzio

A better user experience with $.hover

Not what you're looking for? Click here to view more Hover jQuery plugins

jQuery Hover Delay


This plugin "extends" the jQuery .hover method in a simple yet powerful way. Normally the .hover method takes two arguments, handlerIn and handlerOut, which are executed when the user mouses in and out of an element respectively (for a more detailed explaination of jQuery .hover visit the jQuery docs). This plugin enables the use of a third argument, delay, to be passed to the native jQuery method. If the delay argument (which should be an integer representing milliseconds) is detected, the hover in and out handlers will wait for that amount of time before they are triggered. This produces a more natural feel in certain situations and avoids triggering hovers accidentally during unrelated mouse movements that happen to pass over a hover-enabled element. Basically the mouse must be over the element for X milliseconds before handlerIn is called, and outside of the element for X milliseconds before handlerOut is called.

There is a similar and longstanding plugin that also solves this problem called hoverIntent. Not only does it have delay, but also some more advanced options. This plugin, however, aims to be smaller, lighter, faster, and easier to work with, since it does not introduce a new method to jQuery and does not have a lot of options to configure. This plugin is also compatble with jQuery 1.9.x and will not raise errors if one forgets to include it.


$.hover(handlerIn, handlerOut); // normal .hover
$.hover(handlerInOut); // normal .hover with same handler for in/out

$.hover(handlerIn, handlerOut, delay); // enhanced .hover with delay
$.hover(handlerInOut, delay); // enhanced .hover with delay and same handler for in/out


You might also like these other Hover jQuery Plugins

  • JQuery TouchMenuHover

    Allows ULs (or any element of your choice) that open on li:hover to open on tap/click on mobile platforms such as iOS, Android, WP7 etc

  • JQuery GreyScale Plugin

    A plugin for jQuery convert images to grayscale on the fly and reveal the coloured version on hover

  • JQuery Tooltip Plugin

    A simple hover tooltip