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

Issue

I got a slider which has a couple of anchor elements (with .rslides_nav.next & .rslides_nav.prev) to recreate arrows and allow user to navigate. I must make these arrows invisible until the user is on:hover on the slider. So I use display: none.

EDIT to put the solution: It is not possible to hover on an element that has display: none; better use visibility: hidden; as suggested in the accepted answer.

CSS:

.rslides_nav.next {
    display: none;
}

.rslides_nav.prev {
    display: none;
}

And then I add the class mostrar_navs via Jquery with:

 $('#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')
      }
    );

And this css:

.mostrar_navs {
    display: block !important;
}

Everything works fine until I hover the arrows (anchor). It starts to appear and disappear, so I used the following jquery.hover() which doesn't work:

  $('.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')
      }
  );

Any idea to solve the problem?

EDIT TO ADD 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>

Solution

Make object invisible doesn't mean put them

display: none;

Try with it

visibility: hidden;

Answered By - D. Schreier