https://github.com/tristen/hoverintent

:mouse: Fire mouse events when a user intends it
https://github.com/tristen/hoverintent

hoverintent javascript mouse ui

Last synced: 3 days ago
JSON representation

:mouse: Fire mouse events when a user intends it

• Host: GitHub
• URL: https://github.com/tristen/hoverintent
• Owner: tristen
• License: mit
• Created: 2012-10-19T03:02:53.000Z (about 12 years ago)
• Default Branch: gh-pages
• Last Pushed: 2023-04-14T22:24:52.000Z (over 1 year ago)
• Last Synced: 2024-12-15T11:04:09.036Z (10 days ago)
• Topics: hoverintent, javascript, mouse, ui
• Language: HTML
• Homepage: https://tristen.ca/hoverintent/
• Size: 145 KB
• Stars: 331
• Watchers: 9
• Forks: 54
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
hoverintent

---

hoverintent is a reworking of Brian Cherne's [jQuery plugin](http://cherne.net/brian/resources/jquery.hoverIntent.html)

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](http://tristen.ca/hoverintent) to see how it works in action.

### Browser Support

|  |  |  |  |  |

|:---:|:---:|:---:|:---:|:---:|

| All ✔ | All ✔ | 9+ ✔ | 7+ ✔ | All ✔ |

### Basic usage

#### Adding hoverintent to an element

``` html

  var el = document.getElementById('element-id');

  hoverintent(el,

  function() {

    // Handler in

  }, function() {

    // Handler out

  });

```

#### Removing hoverintent from an element

``` html

  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();

```

### Custom options

You can adjust mouse sensitivity or the length of time a mouse over/out event is fired:

``` html

  var opts = {

    timeout: 500,

    interval: 50

  };

  var el = document.getElementById('element-id');

  hoverintent(el,

  function() {

    // Handler in

  }, function() {

    // Handler out

  }).options(opts);

```

| 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 | 
handleFocus: 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](https://github.com/ender-js/Ender) compilation.

``` js

// ender add hoverintent

$('.element').hoverintent(function() {

    // Handler in

}, function() {

    // Handler out

});

```

### Building

to manage dependencies and build. Development requires you

have [node.js](http://nodejs.org) installed.

1. [Install node.js](http://nodejs.org/). 'Install' will download a package for

your OS.

3. Run `npm install`

4. Run `npm run build`

### Licence

     _____

    < MIT >

     -----

            \   ^__^

             \  (oo)\_______

                (__)\       )\/\

                    ||----w |

                    ||     ||

### Bugs?

[Create an issue](https://github.com/tristen/hoverintent/issues)