JQuery FadeIn и FADEOUT другой DIV при наведении курсора мыши/MouseLeave не мигая

Question

Я получил этот 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> 

И это JQuery:

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

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

Так fotoedit появляется при наведении курсора мыши над cropit-image-preview-container и исчезают на MouseLeave без эффект «мигания» при быстром зависании и оставьте несколько раз. Он отлично работает в firefox, но не в хроме. Каким будет правильный способ сделать это?

Answer 1

Попробуйте следующее.

Я просто удалил onmouseleave из Div и использовал событие jquery hover правильно. В событии hover 1-я функция - это мышь, а вторая функция - mouseleave.

Вот это

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