Wondering what‚Äôs next for npm?Check out our public roadmap! ¬Ľ

    multi-device-hover
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.2¬†‚Äʬ†Public¬†‚Äʬ†Published

    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

    Install

    npm i multi-device-hover

    DownloadsWeekly Downloads

    472

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    15 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar