Utilisation de Hover Intent

Hover Intent est un plug in Jquery qui "analyse" les mouvements de ta souris pour éviter les changements trop brusques dans le cas d'un hover, par exemple :

Tu as une navbar, avec des menu, et des sous menus. si tu survole les menus, tu passes de l'un à l'autre et chaque survol de menu ouvre le sous-menu correspondant.
mais parfois, en voulant déplacer ta souris sur le sous-menu, tu survoles un bref instant le menu d'à côté, e tlà, BIM, tu changes de menu! ça t'es déjà arrivé, hein? c'est chiant!
Hover Intent règle ce problème, puisque si tu passe trop rapidement, il détecte qu'il ne faut pas déclencher l'évènement, et donc, ne pas afficher le menu. Un peu comme si t'avais mis un mini-timeout, sauf que là, il gère tout, tout seul.

exemple :

$('#menu-menu-principal>li').hoverIntent(function() {
$(this).find('>.sub-menu').toggleClass("sub-menu-visible");
  }); 

ton html :
<nav>
   <ul id="menu-menu-principal">
       <li>menu1
            <ul class="sub-menu">{du contenu}</ul>
       </li>
        <li>menu2
            <ul class="sub-menu">{du contenu}</ul>
       </li>
   </ul>
</nav>

Tu sélectionnes la <li>, et à partir de là, si tu sais utiliser le .hover, tu sais utiliser le hoverIntent!
Tu peux soit ne mettre qu'un évènement au survol en entrée mais pas en sortie, faire les deux, en les séparant par des virgules (comme le .hover) soit utiliser un toggle pour faire d'une pierre deux coup :)

Les exemples du site sont très parlants et très clairs :

lien vers le github : https://briancherne.github.io/jquery-hoverIntent/

après, il faut donc créer une nouvelle classe css nommée comme la toggleClass que vous avez choisie, donc moi ce sera sub-menu-visible, dans laquelle il y aura le style qui affichera le sub-menu (sachant qu'il est déjà présent dans notre html, mais en display none ou en visibility hidden). Il faut donc trouver la classe où est actuellement déclenché l'affichage ou non du menu, et la remplacer.

Attention! Si tu veux mettre des options, en fait, il faut lui passer un objet et non directement lui donner les instructions.
donc on fait :

var settingsHoverIntent = {
   over: function() {
      $(this).find('.sub-menu').toggleClass("sub-menu-visible");         },       timeout: 300}
   $('#menu-menu-principal > li').hoverIntent(settingsHoverIntent);