hoverintent
hoverintent is a reworking of Brian Cherne's jQuery plugin
in plain javascript. It has no dependencies.
It's goal is to determine a user's intention when hovering over an element by triggering a mouseover event when the cursor position
has slowed down enough.
Check out the demo to see how it works in action.
Browser Support
Basic usage
Adding hoverintent to an element
<script src='hoverintent.min.js'></script>
<script>
var el = document.getElementById('element-id');
hoverintent(el,
function() {
}, function() {
});
</script>
Removing hoverintent from an element
<script src='hoverintent.min.js'></script>
<script>
var el = document.getElementById('element-id');
var hoverListener = hoverintent(el,
function() {
}, function() {
});
hoverListener.remove();
</script>
Custom options
You can adjust mouse sensitivity or the length of time a mouse over/out event is fired:
<script src='hoverintent.min.js'></script>
<script>
var opts = {
timeout: 500,
interval: 50
};
var el = document.getElementById('element-id');
hoverintent(el,
function() {
}, function() {
}).options(opts);
</script>
Setting | Default Value | Description |
---|
sensitivity | sensitivity: 7 | The value (in pixels) the mouse cursor should not travel beyond while hoverintent waits to trigger the mouseover event. |
interval | interval: 100 | The length of time (in milliseconds) hoverintent waits to re-read mouse coordinates. |
timeout | timeout: 0 | The length of time (in milliseconds) before the mouseout event is fired. |
handleFocus | timeout: false | Adds onOver/onOut callbacks to keyboard navigation during blur and focus events |
Ender support
Add hoverintent
as an internal chain method to your Ender compilation.
$('.element').hoverintent(function() {
}, function() {
});
Building
to manage dependencies and build. Development requires you
have node.js installed.
- Install node.js. 'Install' will download a package for
your OS.
- Run
npm install
- Run
npm run build
Licence
_____
< MIT >
-----
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
Bugs?
Create an issue