"mouseout" of a div father is fired when the cursor is on a div daughter

Question

I’m using the function .mouseover() and .mouseout(). Both work but I have a problem.

The code below is what I’m using for this purpose. The effect always does the animation of <div>: both grows and Minga (decreases), because it alternates between being in a <div> and another.

When you enter a <div> with .mouseover() I would like it not to close while navigating with the cursor divs daughters.

$(".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>

Answer 1

The right thing to do is to use .mouseleave instead of .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 is triggered when the cursor leaves any child element and the element itself. Already the mouseleave is triggered only when the cursor exits the whole element.

Answer 2

See if that was the correct answer, if it is added to class .extra at the 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>