multi-device-hover

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
multi-device-hover
0.1.25 years ago5 years agoMinified + gzip package size for multi-device-hover in KB

Readme

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

NPM

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