@lukeboyle/mouse-near

Trigger a callback when the mouse is near an element

Usage no npm install needed!

<script type="module">
  import lukeboyleMouseNear from 'https://cdn.skypack.dev/@lukeboyle/mouse-near';
</script>

README

mouse-near

Build Status

Detect when the mouse is near/on an element of your choosing and trigger a callback.

Usage

  • npm install @lukeboyle/mouse-near
import mouseNear from '../src/index';

mouseNear('.element-1', () => {
    document.querySelector('.element-1').classList.add('active');
});

See the demo mouse-near.3stacks.me.

Parameters

Argument Type Example
element HTMLElement OR querySelector String document.querySelector('#element');
callback Function (event) => { console.log(event) }
options Object { distance: 40 }

Options

Currently supported options

  • distance - The amount in pixels to trigger outside the bounds of the selected element/

Known Issues

mouse-near depends on element.getBoundingClientRect(), so positioning styles must be applied before the listeners are added. If you are using a deferred script in the head, you must add an eventListener for 'load'.

Example:

import mouseNear from 'mouse-near';

window.addEventListener('load', () => {
    mouseNear('.element', function() {
        console.log('it\'s gucci');
    })
})