swiper的前进后退按钮移入显示移出隐藏

这两天在研究swiper时遇到一个问题，就是鼠标移入轮播图时隐藏前进后退按钮，开始没有看官方文档api自己写了几个方法但是问题多多，然后今天早上一起来无意在官方文档找到了方法肯定是我昨天看的不认真，好了话不多说直接上图与代码

代码如下：

var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical',
    loop: true,

    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },

    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },    
  })   
  //鼠标覆盖停止自动切换与隐藏前进后退按钮
  mySwiper.el.onmouseover = function(){
  mySwiper.navigation.$nextEl.removeClass('hide');
  mySwiper.navigation.$prevEl.removeClass('hide');
}
  //鼠标覆盖停止自动切换与隐藏前进后退按钮
  mySwiper.el.onmouseout = function(){
  mySwiper.navigation.$nextEl.addClass('hide');
  mySwiper.navigation.$prevEl.addClass('hide');
}

---

切记千万不要把回调函数写入swiper实例化里面去，之前我看的不认真出过这个问题，如有问题望指出，希望对您有所帮助。