Eu quero mudar o display dos elementos com as classes .slide-prev e .slide-next. Como estou usando um plugin de slides, ele automaticamente cria os elementos de navegação fora da ul, então a única forma que a mudança de display funcionou foi com javascript. O problema é que não funcionou como deveria.
Quando eu passo o mouse por cima da div com a classe .intro-noticias os elementos aparecem, e quando saio eles somem, até aí tudo bem. O problema é quando eu passo o mouse por cima dos elementos .slide-prev e .slide-next, eles ficam tremendo, somem dependendo de onde a seta está e não ativam o hover.
Pode ser que eu deixei algo simples passar, mas realmente não encontrei, se alguém souber o que está ocasionando isso eu agradeço.
Código:
$(".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>