node package manager
Easy sharing. Manage teams and permissions with one click. Create a free org »

hoverintent

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

Chrome logo Firefox logo Internet Explorer logo Opera logo Safari logo
All ✔ All ✔ 9+ ✔ 7+ ✔ All ✔

Basic usage

Adding hoverintent to an element

<script src='hoverintent.min.js'></script>
<script>
  var el = document.getElementById('element-id');
  hoverintent(el,
  function() {
    // Handler in 
  }, function() {
    // Handler out 
  });
</script> 

Removing hoverintent from an element

<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();
</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() {
    // 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.

Ender support

Add hoverintent as an internal chain method to your Ender compilation.

// ender add hoverintent 
 
$('.element').hoverintent(function() {
    // Handler in 
}, function() {
    // Handler out 
});

Building

to manage dependencies and build. Development requires you have node.js installed.

  1. Install node.js. 'Install' will download a package for your OS.
  2. Run npm install
  3. Run npm run build

Licence

 _____
< MIT >
 -----
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

Bugs?

Create an issue