Skip to content

tristen/hoverintent

gh-pages
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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