sv-hover-intent
sv-hover-intent is a JavaScript plugin for handling mouse hovers on a delay. It tracks when the mouse movement has slowed enough that it's likely the user intended to activate that element.
It's useful for things like dropdown menus, to avoid them popping out if you happen to move past them (for example, when closing the browser tab). See demo.html for an example.
This is essentially a vanilla JavaScript port of the excellent jQuery-hoverIntent plugin by Brian Cherne, though it has been rewritten from the ground up.
Usage
First add the script to your page like so:
<script src="sv-hover-intent.js"></script>
Or add it to your build process. Then in your site's JavaScript, call new SV.HoverIntent with an array or NodeList of the items you wish to apply it to, and an object containing the options. They are:
onEnter- (required) a callback to execute when hover is activatedonExit- (required) a callback to exexute when the mouse moves off the elementexitDelay- (optional) time in milliseconds to delay the exit function; useful for a dropdown menu if the user overshoots slightlyinterval- (optional) polling interval for mouse tracking; only change this if you know what you're doing!sensitivity- (optional) distance in pixels perinterval, below which the hover will activate; only change this if you know what you're doing!
Here's a simple example, which adds and removes a "visible" class to a menu:
// get top-level items from a dropdown menu
var menuItems = document.querySelectorAll('.menu-item');
// set actions for mouse over and mouse leave
var hi = new SV.HoverIntent(menuItems, {
// required parameters
onEnter: function(targetItem) {
targetItem.classList.add('visible');
},
onExit: function(targetItem) {
targetItem.classList.remove('visible');
},
// default options
exitDelay: 400,
interval: 100,
sensitivity: 7,
});
1 May 9, 2021
61 Dec 22, 2022
7 Jul 19, 2022
56 Dec 27, 2022
11 Dec 30, 2022
1 Jul 12, 2021
2 Feb 16, 2021
1 Feb 8, 2022
7 Oct 21, 2022
682 Jan 4, 2023