Numerous Philanthropic Misanthropes

    hoverintent

    2.2.1 • Public • Published

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

    Keywords

    none

    Install

    npm i hoverintent

    DownloadsWeekly Downloads

    14,302

    Version

    2.2.1

    License

    none

    Unpacked Size

    10.3 kB

    Total Files

    7

    Last publish

    Collaborators

    • davidtheclark
    • tristen