display：none;がある要素をjqueryでホバーする方法

Question

私は矢を再作成し、ユーザーがナビゲートできるようにする（& .rslides_nav.next .rslides_nav.prev付き）アンカー要素のカップルを持っているthis linkでスライダーを得ました。ユーザーがオンになるまで、これらの矢印を非表示にする必要があります。スライダにカーソルを合わせます。だから私はdisplay：noneを使う。

.rslides_nav.next { 
    display: none; 
} 

.rslides_nav.prev { 
    display: none; 
} 

そして私はjQueryの経由クラスmostrar_navsを追加します：

$('#metaslider').hover(
     function(){ 
     $('.rslides_nav.next').addClass('mostrar_navs'), 
     $('.rslides_nav.prev').addClass('mostrar_navs') 
     }, 

     function(){ 
     $('.rslides_nav.next').removeClass('mostrar_navs'), 
     $('.rslides_nav.prev').removeClass('mostrar_navs') 
     } 
    ); 

そして、このCSS：私は矢印（アンカー）を置くまで

.mostrar_navs { 
    display: block !important; 
} 

Everythinkが正常に動作しますCSSで。それが表示され、消えるし始めたので、私は動作しません、次のjquery.hover（）を使用：

$('.rslides_nav').hover(
     function(){ 
     $('.rslides_nav.next').addClass('mostrar_navs'), 
     $('.rslides_nav.prev').addClass('mostrar_navs') 
     }, 

     function(){ 
     $('.rslides_nav.next').removeClass('mostrar_navs'), 
     $('.rslides_nav.prev').removeClass('mostrar_navs') 
     } 
); 

任意のアイデアを、問題を解決するためには？

EDIT HTMLを追加するには：

<div id="metaslider_container_133"> 
    <ul id="metaslider_133" class="rslides rslides1"> 
     <li id="rslides1_s0" class="" style="display: block; float: none; position: absolute; opacity: 0; z-index: 1; transition: opacity 600ms ease-in-out;"><img src="http://micubo.kevinmamaqi.com/wp-content/uploads/2016/10/xSLIDER-01.02.jpg.pagespeed.ic.dIb-wgR5PQ.webp" height="700" width="1600" alt="" class="slider-133 slide-164"></li> 
     <li style="float: none; position: absolute; opacity: 0; z-index: 1; display: list-item; transition: opacity 600ms ease-in-out;" id="rslides1_s1" class=""><img src="http://micubo.kevinmamaqi.com/wp-content/uploads/2016/10/xSLIDER-02.02.jpg.pagespeed.ic.r1uBWZHLRw.webp" height="700" width="1600" alt="" class="slider-133 slide-167"></li> 
     <li style="float: left; position: relative; opacity: 1; z-index: 2; display: list-item; transition: opacity 600ms ease-in-out;" id="rslides1_s2" class="rslides1_on"><img src="http://micubo.kevinmamaqi.com/wp-content/uploads/2016/10/xSLIDER-03.02.jpg.pagespeed.ic.obhEqWfXEJ.webp" height="700" width="1600" alt="" class="slider-133 slide-168"></li> 
    </ul> 
    <a href="#" class="rslides_nav rslides1_nav prev mostrar_navs">&lt;</a> 
    <a href="#" class="rslides_nav rslides1_nav next mostrar_navs">&gt;</a> 
</div> 

Answer 1

オブジェクトは見えないが

display: none; 

はあなたが上にマウスを移動することはできませんそれと

visibility: hidden;