THEMETRIAL

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

Author:sk-rt
Views Total:0 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="https://www.cssscript.com/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:");
  }
});


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.