Mouseover and mouseleave trigger every time I move the mouse inside the given element

Question

I am creating a site where you hover the mouse over an image and it shows an element (in this case by expanding its height from 0 to 154px).

jQuery(document).ready(function(){
    jQuery("#dropdown-menu-create .dropimage").mouseover(function(){
        jQuery("#dropdown-menu-create .toggle").animate({height:"154px"},200);
    });
    jQuery("#dropdown-menu-create .dropimage").mouseout(function(){
        jQuery("#dropdown-menu-create .toggle").animate({height:"0"},200);
    });
});

The content expands when the mouse enters and collapses when the mouse leaves, but every time the mouse is moved within the element the content expands and collapses repeatedly until the mouse leaves the element.

I've never had this issue before, and I have used these functions in the past, so i'm at a loss as to what is going on. Any ideas?

Edit:

jQuery(document).ready(function(){
    jQuery("#dropdown-menu-create .dropimage").mouseenter(function(){
        jQuery("#dropdown-menu-create .toggle").stop(true,true).animate({height:"154px"},200);
    });
    jQuery("#dropdown-menu-create .dropimage").mouseleave(function(){
        jQuery("#dropdown-menu-create .toggle").stop(true,true).animate({height:"0"},200);
    });
});

I am now using the code above and still getting the exact same issue. I have tried all variations of the .stop function (false,false)(false,true)(true,false)(true,true). The issue occurs differently with each one, but it still occurs.

ULTIMATE EDIT:

The problem was that the content that the mouse went over was covered up by different content once the function was called. Therefore, at any given point the mouse was simultaneously entering and leaving the image. Solved the issue by moving the function call to a different element.

This happens because the `mouseout` and `mouseover` events bubble up to parent, so when you hover over a child element of `.dropimage`, its `mouseout` and `mouseover` events bubble up to `.dropimage`. Using `mouseleave` and `mouseenter` instead will fix the problem. Once that problem is fixed, you will find that you need to call `.stop(true,true)` before `.animate()` to stop previous animations in the event that you hover over and out multiple times quickly. — Kevin B, Apr 09 '12 at 21:30
maybe your binding the event to the image and element? instead of just the image? — Mouseroot, Apr 09 '12 at 21:40
@Mouseroot I changed the selector to "#dropdown-menu-create .dropimage img" and it is still happening. — bcloutier, Apr 09 '12 at 21:45
I tried giving each element I addressed a unique ID, but the action is still not working. I'm really at a loss here. — bcloutier, Apr 10 '12 at 15:19

score 13 · Accepted Answer · edited Apr 09 '12 at 21:26

13

Try using the .mouseenter event instead of the .mouseover

I think that will do!

edited Apr 09 '12 at 21:26

Benjamin Crouzier

40,265
44
171
236

answered Apr 09 '12 at 21:25

John Shepard

937
1
9
27

score 6 · Answer 2 · answered Apr 09 '12 at 21:26

6

You may need to use mouseenter instead of mouseover and mouseleave instead of mouseout

Or you may try and use .hover function as below,

jQuery(document).ready(function(){
    jQuery("#dropdown-menu-create .dropimage").hover(function(){ //mouseenter
        jQuery("#dropdown-menu-create .toggle").animate({height:"154px"},200);
    }, function(){ //mouseleave
        jQuery("#dropdown-menu-create .toggle").animate({height:"0"},200);
    });
});

answered Apr 09 '12 at 21:26

Selvakumar Arumugam

79,297
15
120
134

Also needs mouseleave instead of mouseout. – Kevin B Apr 09 '12 at 21:28
@KevinB Thank Kevin. Updated and Added more :) – Selvakumar Arumugam Apr 09 '12 at 21:31

score 3 · Answer 3 · answered Apr 09 '12 at 21:27

Since you are trying to implement this on a container, your correct event handler are mouseenter and mouseleave.

Example:

$("#dropdown-menu-create .dropimage").mouseenter(function(){
    $("#dropdown-menu-create .toggle").animate({height:"154px"},200);
});
$("#dropdown-menu-create .dropimage").mouseleave(function(){
    $("#dropdown-menu-create .toggle").animate({height:"0"},200);
});

score 2 · Answer 4 · answered Apr 09 '12 at 21:25

2

adding a .stop() before your .animate() will help fix this. by stopping the previous animation this prevents the animation firing multiple times if the user moves their mouse over the element many times quickly

answered Apr 09 '12 at 21:25

Mouseroot

1,034
2
9
13

score 2 · Answer 5 · edited Dec 09 '22 at 09:18

Although this may not be completely relevant, I had a similar issue. Everything I would move my most over the div, the event would fire. To solve it, I realized that when the 'hover' event was triggered, the toggled div had become the one my mouse was over. To fix it, I just added an event on that one to fade it out on mouse leave.

$('.profile-image').hover(function() {
  $(this).next().fadeIn(100);
});

$('.profile-about').mouseleave(function() {
  $(this).fadeOut(100);
});

.profile-about {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 5%;
  left: 0;
  z-index: 2;
  display: none;
}

.profile-image {
  max-height: 300px;
  max-width: 300px;
  -webkit-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.75);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="img/somebody.jpg" class="profile-image">
<div class="profile-about">
  <p>
    Hello I am somebody!
  </p>
</div>

Mouseover and mouseleave trigger every time I move the mouse inside the given element

5 Answers5

Linked