Pure JavaScript Library Add Custom Classes To Element On Hover

MultiDeviceHover is a pure JavaScript library that adds.is-hover class instead of css:hover for mobile and desktop.

add class on mouseover javascript, on hover add class to another div css, hover css, add class on hover jquery, hover css animation

How to make use of it:

1. Install and import the MultiDeviceHover.

# NPM
$ npm i multi-device-hover

import MultiDeviceHover from 'multi-device-hover';

2. Or embrace the mdh.min.js on the web page.

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

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

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

4. You can even apply multiple CSS lessons to the aspect 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 features.

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

Add Custom Classes To Element On Hover, MultiDeviceHover Plugin/Github