在另一個元素的懸停中更改元素的顯示不起作用，因爲它應該

Question

我想要使用.slide-prev和.slide-next類來更改元素的顯示。當我使用幻燈片插件時，它會自動在ul外部創建導航元素，所以顯示更改的唯一方式就是使用javascript。問題是它沒有按照它應該的那樣工作。

當我將鼠標移動到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"> \t 
 
      <div> 
 
       <h2></h2> 
 
      </div> 
 
     </div> 
 
    </li> 
 
</ul> 
 

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

Answer 1

你可以用UL和錨入<div class="cont">和綁定的mouseenter和鼠標離開這個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"); 
});