Bigcommerce 스텐실 테마에 호언가를 추가하십시오.

Question

bigcommerce 스텐 슬 테마에 hoverintent를 사용하려고합니다. 작동하지 않습니다.

1. $가 NPM
   /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'); 
    } 
} 

hoverintent

hoverintent.js를 설치
플러그인을 설치

---

업데이트 이것은 내가 얻을 오류입니다

---

import $ from 'jquery'; 

... 

import hoverIntent from './global/hoverintent'; 

... 

export default class Global extends PageManager { 

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

---

/assets/js/theme/global.js

을 global.js

브라우저.

TypeError : $ ('. navigation-main li'). hoverIntent는 함수가 아닙니다. hoverIntent (hoverOntent가 정의되지 않음)

Answer 1

어떻게해야 할지를 알 수 없었습니다. (예 : '내비게이션 - 메인 리'에서 .hoverIntent (hoverOver, hoverOut) 큰 상거래 스텐실 테마에서 작동하도록 마우스를 가져 가면 순수한 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;}