MultiDeviceHover

Pure JavaScript library that add .is-hover class instead of css :hover for mobile and desktop.

Usage

Install

Using npm, install multi-device-hover

$ npm install multi-device-hover --save

Import

import MultiDeviceHover from 'multi-device-hover';

or use stand-alone dist/standalone/mdh.min.js

<script src="path/to/mdh.min.js"></script>

Example

> Examples

Markup

<a href="./" data-hover>button1</a> 
<a href="./" data-hover>button2</a>

JS

// * NodeList only
const hoverElements = document.querySelectorAll('[data-hover]');

// Default Options
MultiDeviceHover.init(hoverElements)

// Custom Class
MultiDeviceHover.init(hoverElements,{
   hoverClass: 'is-custom-hover' // default "is-hover"
})

// Multiple Classes
MultiDeviceHover.init(hoverElements,{
   hoverClass: ['is-hover', 'is-custom-hover'] 
})

// Full Options
 MultiDeviceHover.init(hoverElements, {
    hoverClass : "is-hover",
    onEnter: (element,mouseEvent) => {
        console.log("Enter:");
        console.log(element,mouseEvent);
    },
    onLeave: (element,mouseEvent) => {
        console.log("Leave:");
        console.log(element,mouseEvent);
    },
    onDestroy: (element) => {
        console.log("Destoy:");
        console.log(element);
    }
});

// Destroy - removeEventListener 
MultiDeviceHover.destroy(hoverElements)

License

MIT