将悬浮状态添加到Bigcommerce模具主题

Question

I am tryig to use hoverintent with a bigcommerce stencil theme and I cannot get ti to work.

1. Install the plugin
   $npm install 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. Update 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();
    }
}

---

This is the error that I get in the browser.

TypeError: $('.navigation-main li').hoverIntent is not a function. (In '$('.navigation-main li').hoverIntent(hoverOver, hoverOut)', '$('.navigation-main li').hoverIntent' is undefined)

Answer 1

I could not figure out how to get hover intent to work on bigcommerce stencil theme so I went with a pure css way. There are a few good tutorials online about this topic. Here is the on I referenced, by 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;}