Author: | sk-rt |
---|---|
Views Total: | 218 views |
Official Page: | Go to website |
Last Update: | June 9, 2021 |
License: | MIT |
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:"); } });