Changing elements display in another element’s Hover does not work as it should

Question

I want to change the display of the elements with the classes . slide-Prev and . slide-next. Since I’m using a slide plugin, it automatically creates the elements of browsing outside ul, so the only way the display change worked was with javascript. The problem is it didn’t work out the way it should.

When I pass the mouse over the div with the class . intro-news the elements appear, and when I leave they disappear, so far so good. The problem is when I pass the mouse over the elements . slide-Prev and . slide-next, they get shivering, fade depending on where the arrow is and don’t activate the Hover.

It may be that I let something simple pass, but I really did not find, if someone knows what is causing it I thank.

Video demonstrating the problem

Code:

$(".intro-noticias").hover(function() {
    $('.slide-prev,.slide-next').css("display", "block");
}, function() {
    $('.slide-prev,.slide-next').css("display", "none");
});

.intro-noticias {
  width: 100%;
  height: 85vh;
  margin-top: 70px;
}

.slide-prev {
  z-index: 20;
  position: absolute;
  top: 70px;
  left: 0;
  text-indent: -9999px;
  height: 40px;
  width: 40px;
  border: solid 1px #fff;
  background: rgba(0,0,0,0.5);
  display: none;
}

.slide-prev:after {
  content:"icon";
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 9.5px;
  left: 2px;
  display: block;
  background: url("img/icones/previous.png") left center no-repeat;
}

.slide-prev:hover {
  background: red;
  transition: all 0.2s ease-in;
}

.slide-next {
  z-index: 20;
  position: absolute;
  top: 70px;
  left: 40px;
  text-indent: -9999px;
  height: 40px;
  width: 40px;
  border: solid 1px #fff;
  background: rgba(0,0,0,0.5);
  display: none;
}

.slide-next:after {
  content:"icon";
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 9.5px;
  right: 2px;
  display: block;
  background: url("img/icones/next.png") right center no-repeat;
}

.slide-next:hover {
  background: red;
  transition: all 0.2s ease-in;
}

<ul>
    <li>
      <div class="intro-noticias">	
          <div>
              <h2></h2>
          </div>
      </div>
    </li>
</ul>

<a href="#" class="slide-prev">Previous</a>
<a href="#" class="slide-next">Next</a>

Answer 1

What is happening is that when the mouse enters the elements .slide-prev or .slide-next, he sends a mouseleave to the .intro-noticias, causing this Flicker.

A possible solution would be, in the mouseleave, find out which element is entering, and if it is one of those buttons, do nothing. For this, we have the relatedTarget, that, in the mouseleave, points to the element the mouse entered.

According to the documentation (my translation):

The read-only property Mouseevent.relatedTarget is the secondary target for the event, if any. This is:

mouseleave

currentTarget: The Eventtarget that the mouse entered.

So the following change should solve the problem:

$(".intro-noticias").hover(function(e) {

    $('.slide-prev,.slide-next').css("display", "block");

}, function(e) {

    /* não esconder se estiver passando o mouse por cima dos botões */
    if (
        e.relatedTarget && 
        (
            e.relatedTarget.className === 'slide-prev' || 
            e.relatedTarget.className === 'slide-next'
        )
    ) return;

    $('.slide-prev,.slide-next').css("display", "none");
});

Answer 2

I added a div with the intro-slides class, modified the script and worked

$(".intro-slides").mouseenter(function() {
    $('.slide-prev,.slide-next').css("display", "block");
});
$(".intro-slides").mouseleave(function() {
    $('.slide-prev,.slide-next').css("display", "none");
});

<div class="intro-slides">
 <ul>
    <li>
      <div class="intro-noticias">  
          <div>
              <h2></h2>
          </div>
      </div>
    </li>
  </ul>

  <a href="#" class="slide-prev">Previous</a>
  <a href="#" class="slide-next">Next</a>
</div>