mouseout of a parent div and a daughter div?

Question

mouseout of a parent div and a daughter div?

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

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

The code below is what I'm using for this purpose. The effect always makes the animation because the div both grows and minga, because it switches between being between one div and another.

$(".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><divclass="prev_noti">
  <div class="chevr">
    <i class="fa fa-chevron-right fa-2x" aria-hidden="true"></i>
  </div>
  <div class="extra">
    Textoooooooo
  </div>
</div>

html jquery css animate

asked by anonymous 25.10.2017 / 17:24

2 answers

0

Correct 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><divclass="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 fired when the cursor exits any child element and the element itself. The mouseleave is only triggered when the cursor exits the entire element.

25.10.2017 / 21:23

Problem with checkbox and OnItemClick event cakephp controller using functions from another controller

score 0 · Accepted Answer

See if that was the correct answer, if I added class .extra to 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><divclass="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>