Press "Enter" to skip to content

Pure JavaScript Library Add Custom Classes To Element On Hover | MultiDeviceHover

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


See Demo And Download

Official Website(sk-rt): Click Here

This superior jQuery/javascript plugin is developed by sk-rt. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *