Disable Tap-Hover Event On Touch Devices - mouseHover

To deal with hover event on the mobile device, the mouseenter and mouseleave events can be emulated by tapping the display.

mouseHover is a replacement for the jQuery hover() function that disables/ignores the tap-hover event on touch devices.

How to use it:

1. Insert the latest version of jQuery JavaScript library into the html document.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>

2. Replace the native .hover method with .mousehover and done.

$('.element').mousehover(
  function () {
    // ..
  },
  function () {
    // ...
  }
);

3. Possible parameters.

• handlerIn: A function to execute when the mouse pointer enters the element.
• handlerOut: A function to execute when the mouse pointer leaves the element.
• options: Customize the namespace.

// $('.element').mousehover(handlerIn, handlerOut, options)
$('.element').mousehover(
  function () {
    // ..
  },
  function () {
    // ...
  },
  options: {
    namespace: 'menu'
  }
);

4. If you want to unbind the event handlers.

$('.element').mousehover('off', options);

Installation:

# NPM
$ npm install jquery.mousehover --save

# Bower
$ bower install jquery.mousehover --save

---

This awesome jQuery plugin is developed by prantlf. For more Advanced Usages, please check the demo page or visit the official website.