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

Category: Javascript | June 9, 2021
Author:sk-rt
Views Total:86 views
Official Page:Go to website
Last Update:June 9, 2021
License:MIT

Preview:

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

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:");
  }
});

You Might Be Interested In:


Leave a Reply