superhuman-hoverintent

Fire mouse events when the user intends it

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
superhuman-hoverintent
1.0.38 years ago8 years agoMinified + gzip package size for superhuman-hoverintent in KB

Readme

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.
  1. Run npm install
  2. Run npm run build

Licence

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

Bugs?

Create an issue