別の要素のホバー内の要素の表示を変更すると動作しません。

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">にULおよびアンカーを包むとのMouseEnterイベントをバインドし、このdiv要素に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"); 
});