Add Custom Classes To Element On Hover – multi-device-hover.js

Preview:

Description:

A JavaScript alternative to the CSS :hover selector that applies custom classes to any DOM element on hover & touch tap.

How to use it:

1. Install and import the MultiDeviceHover.

# NPM
$ npm i multi-device-hover

import MultiDeviceHover from 'multi-device-hover';

2. Or include the mdh.min.js on the page.

<script src="dist/standalone/mdh.min.js"></script>

3. Initialize the MultiDeviceHover on your element. This will add a CSS class named is-hover to the element when hovering over.

const targetEle = document.querySelectorAll('#myElement');
MultiDeviceHover.init(targetEle);

4. You can also apply multiple CSS classes to the element when hovering over.

const targetEle = document.querySelectorAll('#myElement');
MultiDeviceHover.init(targetEle,{
  hoverClass: ['is-hover', 'is-hover-2', 'is-hover-3']
});

5. Destroy the instance.

MultiDeviceHover.destroy(targetEle);

6. Callback functions.

MultiDeviceHover.init(targetEle,{
  onEnter: (element,mouseEvent) => {
    console.log(element,mouseEvent);
  },
  onLeave: (element,mouseEvent) => {
    console.log(element,mouseEvent);
  },
  onDestroy: (element) => {
    console.log("Destoy:");
  }
});