.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>
私たちは、そうでない場合、我々はただの推測 –