Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

hoverintent

Package Overview
Dependencies
Maintainers
2
Versions
13
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

hoverintent

Fire mouse events when the user intends it

  • 2.2.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
2
Created
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

Package last updated on 15 Aug 2019

Did you know?

Socket

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
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc