Изменение отображения элементов при наведении на другой элемент не работает, как должно быть

Question

Я хочу изменить отображение элементов с помощью классов .slide-prev и .slide-next. Когда я использую плагин для слайдов, он автоматически создает элементы навигации вне ul, поэтому единственным способом изменения отображения был javascript. Проблема в том, что она не работает должным образом.

Когда я перемещаю мышь над div с классом .intro-noticias, появляются элементы, и когда я ухожу, они исчезают, пока что так хорошо. Проблема в том, что когда я навешиваю элементы .slide-prev и .slide-next, они дрожат, исчезают в зависимости от того, где находится стрелка и не активируют зависание.

Возможно, я что-то пропустил, но я действительно не нашел его, если кто-то знает, что его вызывает, я его ценю.

Video demonstrating the problem

$(".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"> \t 
 
      <div> 
 
       <h2></h2> 
 
      </div> 
 
     </div> 
 
    </li> 
 
</ul> 
 

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

Answer 1

Вы можете обернуть мкл и анкеры в <div class="cont"> и связать события MouseEnter и MouseLeave к этим делам.

<div class="cont"> 
<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> 

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