swiper矢印をhoverしたら現れるようにしたい


画像スクローラにswiperを使っています。gemでswiper-railsというのがありそれでrailsに導入しました。  
動作するようになったのですが、デフォルトだと[![イメージ](https://i.stack.imgur.com/jWOJR.png)](https://i.stack.imgur.com/jWOJR.png)画像にhoverしたら矢印が現れるようにできません。デフォルトでは消しといてhoverしたら矢印が現れるようにできる方法をご存知の方いらっしゃいますでしょうか？

[code]

    .swiper-container
      .swiper-wrapper
        .swiper-slide
          = image_tag hoge.image1.url
        .swiper-slide
          = image_tag hoge.image2.url
        .swiper-slide
          = image_tag hoge.image3.url
      .swiper-pagination
      .swiper-button-prev.swiper-button-black
      .swiper-button-next.swiper-button-black
    
[/code]

javascript

[code]

    mySwiper = new Swiper('.swiper-container',
      direction: 'horizontal'
      loop: true
      autoplay: 5000
      autoResize: true
      calculateHeight: true
      pagination: '.swiper-pagination'
      paginationClickable: true
      nextButton: '.swiper-button-next'
      prevButton: '.swiper-button-prev'
    )
    
[/code]




自己解決しました。

[code]

    .container-fluid .swiper-container:hover .swiper-button-prev.swiper-button-black {
      visibility: visible;
    }
    .container-fluid .swiper-container:hover .swiper-button-next.swiper-button-black {
      visibility: visible;
    }
    .swiper-button-prev.swiper-button-black,
    .swiper-button-next.swiper-button-black {
      visibility: hidden;
    }
    
[/code]




自己解決しました。

[code]

    .container-fluid .swiper-container:hover .swiper-button-prev.swiper-button-black {
      visibility: visible;
    }
    .container-fluid .swiper-container:hover .swiper-button-next.swiper-button-black {
      visibility: visible;
    }
    .swiper-button-prev.swiper-button-black,
    .swiper-button-next.swiper-button-black {
      visibility: hidden;
    }
    
[/code]

