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
const hoverElements = document.querySelectorAll('[data-hover]');
MultiDeviceHover.init(hoverElements)
MultiDeviceHover.init(hoverElements,{
hoverClass: 'is-custom-hover'
})
MultiDeviceHover.init(hoverElements,{
hoverClass: ['is-hover', 'is-custom-hover']
})
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);
}
});
MultiDeviceHover.destroy(hoverElements)
License
MIT
