jQuery fadein and fadeout another div on hover / mouseleave without blinking

Question

I got this HTML:

<div class="cropit-image-preview-container" style="width: 300px; height: 200px; background: yellow; onmouseleave="hideedit()">
  <div id="fotoedit" style="display: none;">edit</div>
</div>

And this jQuery:

$('.cropit-image-preview-container').hover(function(){
    $('#fotoedit').stop().fadeIn();
});

function hideedit(){
    $("#fotoedit").stop().fadeOut();
}

So fotoedit appears on hover over cropit-image-preview-container and disappear on mouseleave without the "blink" effect when you fast hover and leave multiple times. It works perfect in firefox but not in chrome. What would be the proper way to do it?

Answer 1

Try the following.

I just deleted onmouseleave from Div and used jquery hover event properly. In hover event, 1st function is mouseenter and 2nd function is mouseleave.

That's it

 $('.cropit-image-preview-container').hover(function(){ $('#fotoedit').stop().fadeIn(); },function(){ $("#fotoedit").stop().fadeOut(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="cropit-image-preview-container" style="width: 300px; height: 200px; background: yellow;" > <div id="fotoedit" style="display: none;">edit</div> </div>