javascript - 在悬停另一个元素时更改元素的显示不起作用

Question

我想用 .slide-prev 和 .slide-next 类更改元素的显示。当我使用幻灯片插件时，它会自动在 ul 外部创建导航元素，因此显示更改起作用的唯一方法是使用 javascript。问题是它没有按预期工作。

当我将鼠标移到带有 .intro-noticias 类的 div 上时，元素出现，当我离开时它们消失，到目前为止一切顺利。问题是当我将鼠标悬停在元素 .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">	
          <div>
              <h2></h2>
          </div>
      </div>
    </li>
</ul>

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

Answer 1

您可以将 ul 和 anchors 包装到 <div class="cont"> 中并将事件 mouseenter 和 mouseleave 绑定(bind)到这个 div。

<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");
});