Question

我尝试使用具有大商业模板主题的hoverintent，但我无法工作。

安装插件
$ npm install hoverintent
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');
    }
}

更新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();
    }
}

这是我在浏览器中收到的错误。

TypeError：$（＆＃39; .navigation-main li＆＃39;）。hoverIntent不是函数。（＆＃39; $（＆＃39; .navigation-main li＆＃39;）。hoverIntent（hoverOver，hoverOut）＆＃39;，＆＃39; $（＆＃39; .navigation-main li＆＃39; ;）。hoverIntent＆＃39;未定义）

Answer 1

我无法弄清楚如何让悬停意图在大型商业模板主题上工作，所以我采用了纯粹的CSS方式。网上有一些关于这个主题的好教程。以下是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;}

将hoverintent添加到Bigcommerce Stencil主题

1 个答案: