Hover Intent Detection Plugin With jQuery - hoverIntent
File Size: | 10.9 KB |
---|---|
Views Total: | 4531 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A lightweight yet useful jQuery user intent detection plugin to extend the jQuery's hover method that delays the handlerIn function until the user actually wants to hover over a specific element. Great for preventing the accidental firing of hover events when the mouse pointer enters and leaves the elements.
How to use it:
1. Load the JavaScript file 'jquery.hoverIntent.js' plugin after jQuery JavaScript library and the hoverIntent is ready for use.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.hoverIntent.js"></script>
2. Basic usage. Just like the .hover()
method.
- handlerIn: function OR configuration object
- handlerOut: function OR selector for delegation OR undefined
.hoverIntent( handlerIn, handlerOut ) .hoverIntent( handlerInOut )
3. Basic usage. With event delegation.
- handlerIn: function OR configuration object
- handlerOut: function OR selector for delegation OR undefined
- selector: selector OR undefined
.hoverIntent( handlerIn, handlerOut, selector ) .hoverIntent( handlerInOut, selector )
4. Activate the plugin using a basic configuration object.
.hoverIntent({ // The number of milliseconds hoverIntent waits between reading/comparing mouse coordinates. // When the user's mouse first enters the element its coordinates are recorded. // The soonest the "over" function can be called is after a single polling interval. // Setting the polling interval higher will increase the delay before the first possible "over" call, but also increases the time to the next point of comparison. interval: 100, // If the mouse travels fewer than this number of pixels between polling intervals, then the "over" function will be called. // With the minimum sensitivity threshold of 1, the mouse must not move between polling intervals. // With higher sensitivity thresholds you are more likely to receive a false positive. Note that hoverIntent r7 and earlier perform this comparison using rectilinear distance, whereas more recent versions compare against Euclidean (straight-line) distance for better accuracy and intuition. // If you are upgrading from an older version, you may want to verify that the desired behavior is preserved. sensitivity: 6, // A simple delay, in milliseconds, before the "out" function is called. // If the user mouses back over the element before the timeout has expired the "out" function will not be called (nor will the "over" function be called). // This is primarily to protect against sloppy/human mousing trajectories that temporarily (and unintentionally) take the user off of the target element... giving them time to return. timeout: 0 })
Changelog:
2021-12-14
- v1.10.2: Replaces the deprecated jQuery.isFunction
2019-10-06
- v1.10.1: Fixes a possible race condition by checking for hoverIntent data before attempting to access it
2019-02-26
- v1.10.0
2017-09-01
- v1.9.0
This awesome jQuery plugin is developed by briancherne. For more Advanced Usages, please check the demo page or visit the official website.