jQuery fadein和另一个div在悬停/鼠标不眨眼的情况下

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上空的悬停，并消失在鼠标没有“眨眼”的效果，当你快速悬停和离开多次。它在firefox中运行得很完美，但在chrome中却不是很好。怎样才是正确的方法呢？

Answer 1

试试看以下几点。

我刚刚从Div中删除了onmouseleave，并正确地使用了jquery悬停事件。在悬停事件中，第一个函数是鼠标中心，第二个功能是鼠标保存。

就这样

​

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

​