Ajouter hoverintent au thème Stencil Bigcommerce

Question

Je suis tryig pour utiliser hoverintent avec un thème stencil bigcommerce et je ne peux pas obtenir ti pour travailler.

1. Installez le plug-in
   $ installer NPM hoverintent

2. hoverintent.js
   /assets/js/theme/global/hoverintent.js

---

import request from 'hoverintent'; 

export default function() { 
    $(function() { 
     $('.navigation-main li').hoverIntent(hoverOver , hoverOut); 
    }); 

    // expand the height of the container 
    function hoverOver(){ 
     $(this).addClass('js-hover'); 
    } 

    // reset the height of the container 
    function hoverOut() { 
     $(this).removeClass('js-hover'); 
    } 
} 

---

3. Mise à jour global.js
   /assets/js/theme/global.js

---

import $ from 'jquery'; 

... 

import hoverIntent from './global/hoverintent'; 

... 

export default class Global extends PageManager { 

    loaded(next) { 
     ... 
     hoverIntent(); 
     next(); 
    } 
} 

---

C'est l'erreur que je reçois dans le navigateur. TypeError: $ ('. Navigation-main li') hoverIntent n'est pas une fonction.

(Dans '$ ('. Navigation-main li ') hoverIntent (hoverOver, hoverOut)', '$ ('. Navigation-main li '). HoverIntent' est indéfini)

Answer 1

Je n'arrivais pas à comprendre comment obtenir l'intention de vol stationnaire de travailler sur le thème de pochoir bigcommerce donc je suis allé avec un moyen css pur. Il y a quelques bons tutoriels en ligne sur ce sujet. Voici le sur I référencé, par J. Hogue.

http://codepen.io/jhogue/pen/payuj

.submenu {position: absolute; top: 100%;} 
.element .submenu {transition: all 0s ease; left: -999em;} 
.element:hover .submenu{ transition-delay: .25s; left: 0;}