Socket
Socket
Sign inDemoInstall

hoverintent

Package Overview
Dependencies
0
Maintainers
2
Versions
13
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

hoverintent

Fire mouse events when the user intends it


Version published
Maintainers
2
Weekly downloads
14,101
decreased by-6.31%

Weekly downloads

Readme

Source

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 logoFirefox logoInternet Explorer logoOpera logoSafari 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>
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 (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
timeout: 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

FAQs

Last updated on 15 Aug 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc