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
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)
4 May 3, 2022
14 Jan 3, 2023
6 Aug 4, 2022
3.5k Jan 4, 2023
2 Jun 21, 2022
3 Nov 21, 2022
14 Dec 16, 2022
203 Dec 27, 2022
22.4k Dec 29, 2022
69 Jan 8, 2023
16 Jan 4, 2023
1.9k Dec 27, 2022
33.4k Jan 7, 2023
8 Sep 5, 2022
33 Dec 25, 2022
5 Oct 1, 2022
59 Dec 29, 2022
37 Dec 23, 2022
13 Dec 7, 2022