Javascript 如何将jquery悬停在具有display:none的元素上；

我得到了一个滑块，它有两个锚元素（带有.rslides\u nav.next和.rslides\u nav.prev）来重新创建箭头并允许用户导航。我必须使这些箭头不可见，直到用户处于启用状态：将光标悬停在滑块上。所以我使用display:none

编辑以放置解决方案：不可能将鼠标悬停在具有

display:none的元素上更好地使用
可见性：隐藏如接受答案中所建议

CSS:

然后我通过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;
}

一切正常，直到我悬停箭头（锚）。它开始出现和消失，所以我使用了下面的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')
      }
  );

有什么办法解决这个问题吗

编辑以添加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>







使对象不可见并不意味着放置它们

display: none;

试试看

visibility: hidden;

不能将鼠标悬停在未显示的图元上。使用
visibility:hidden
代替。另外，作为一个附带注释，在CSS中实现悬停效果比在jQuery中切换类更干净。我猜箭头不在您悬停的幻灯片中，当鼠标悬停在箭头上时，它会有效地离开幻灯片，触发mouseleave事件，这会移除类，直到它们被隐藏，然后mouseenter事件再次激发，并继续。这是一个常见的问题。要么将箭头放在滑块的元素中，要么将HTML发布到这里以获得帮助。@adeneo谢谢，箭头就是从选择器中出来的。
visibility: hidden;