Eu estou a usar a função .mouseover()
e .mouseout()
. Ambos funcionam mas tenho um problema.
O código abaixo é o que estou a usar para o efeito. O efeito faz sempre a animação da <div>
: tanto cresce quanto minga (diminui), porque ele alterna entre estar em uma <div>
e outra.
Quando entra numa <div>
com .mouseover()
gostaria que ela não fechasse enquanto navegasse com o cursor nas div
s filhas.
$(".chevr").mouseover(function() {
$(".prev_noti").animate({
width: "30%"
}, 200);
$(".extra").css("width", "initial");
});
$(".prev_noti").mouseout(function() {
$(".prev_noti").animate({
width: "0%"
}, 200);
});
.prev_noti {
background: black;
position: fixed;
top: 40%;
}
.chevr {
border-right: 1px solid white;
padding: 50px 10px 50px 10px;
white-space: nowrap;
overflow: hidden;
float: left;
}
.extra {
width: 0px;
overflow: hidden;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="prev_noti">
<div class="chevr">
<i class="fa fa-chevron-right fa-2x" aria-hidden="true"></i>
</div>
<div class="extra">
Textoooooooo
</div>
</div>