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悬停事件。在悬停事件中，第一个功能是mouseenter，第二个功能是mouseleave。

那是

＆＃13;

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

＆＃13;

<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>

＆＃13;

jQuery fadein并在hover / mouseleave上淡出另一个div而不闪烁

1 个答案: