hoverintent

Fire mouse events when the user intends it

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 users 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.

<script src='hoverintent.min.js'></script>
<script>
  var el = document.getElementById('element-id');
  hoverintent(el,
  function() {
    // Handler in 
  }, function() {
    // Handler out 
  });
</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> 
SettingDefault ValueDescription
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 hoverintent waits to re-read mouse coordinates.
timeout
timeout: 0
The length of time the mouseout event is fired.

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

$ ender add hoverintent

Use it:

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

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 make
 _____
< MIT >
 -----
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

Create an issue