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.
 |  |  |  |  |
|---|---|---|---|---|
| All ✔ | All ✔ | 9+ ✔ | 7+ ✔ | All ✔ |
<script src='hoverintent.min.js'></script> <script> var el = document.getElementById('element-id'); hoverintent(el, function() { // Handler in }, function() { // Handler out }); </script><script src='hoverintent.min.js'></script> <script> var el = document.getElementById('element-id'); // Save a reference to the method var hoverListener = hoverintent(el, function() { // Handler in }, function() { // Handler out }); // Remove hoverintent listeners hoverListener.remove(); // Remove hoverintent and fire the out handler hoverListener.remove(true); </script>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() { // Handler in }, function() { // Handler out }).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 |
Add hoverintent as an internal chain method to your Ender compilation.
// ender add hoverintent $('.element').hoverintent(function() { // Handler in }, function() { // Handler out });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
_____ < MIT > ----- \ ^__^ \ (oo)\_______ (__)\ )\/\ ||----w | || ||