0

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 divs 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>

0

2 Respostas 2

0

Veja se era essa a resposta correta, se for acrescentei a class .extra ao event mouseout().

$(".chevr").mouseover(function() {
  $(".prev_noti").animate({
    width: "30%"
  }, 200);
  $(".extra").css("width", "initial");
});
$(".prev_noti .extra").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;
  color:white;
}
<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">
    Texto exemplo app
  </div>
</div>

0

O correto é usar .mouseleave em vez de .mouseout:

$(".chevr").mouseover(function() {
  $(".prev_noti").animate({
    width: "30%"
  }, 200);
  $(".extra").css("width", "initial");
});
$(".prev_noti").mouseleave(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;
  color: #fff;
}
<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>

mouseout é acionado quando o cursor sai de qualquer elemento-filho e do próprio elemento. Já o mouseleave só é acionado quando o cursor sai do elemento todo.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .