如何 jquery 悬停具有显示的元素：none；

Question

我得到了一个滑块，它有几个锚元素（.rslides_nav.next & .rslides_nav.prev) 重新创建箭头并允许用户导航。我必须让这些箭头不可见，直到用户在滑块上 on:hover。所以我使用显示：none.

编辑以提出解决方案：无法将鼠标悬停在具有 display: none; 的元素上，最好按照接受的答案中的建议使用 visibility: hidden;。

CSS:

.rslides_nav.next {
    display: none;
}

.rslides_nav.prev {
    display: none;
}

然后我通过 Jquery 添加 class 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>

Answer 1

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

display: none;

试试看

visibility: hidden;

Answer 2

//On hover tag hide img1 and show img2    

.img2 {
        display:none;
    }
    
    .img1:hover + .img2 {
        transition-duration:0s;
        display: block;
    }

如何 jquery 悬停具有显示的元素：none；

How to jquery hover an element that has display: none;

html

javascript

css

jquery

slider