Question

我有一个滑块，它有几个锚元素（ .rslides_nav.next ＆amp; .rslides_nav.prev ）来重新创建箭头并允许用户导航。在用户打开之前，我必须使这些箭头不可见：将鼠标悬停在滑块上。所以我使用display：none。

编辑以提供解决方案：根据接受的答案中的建议，无法将鼠标悬停在display: none;更好地使用visibility: hidden;的元素上。

CSS：

.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;
}

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

如何jquery悬停具有display：none的元素;

1 个答案: