jQuery 另一个 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 上并在鼠标离开时消失，当您多次快速悬停和离开时没有 "blink" 效果。它在 firefox 中运行完美，但在 chrome 中运行不佳。正确的做法是什么？

Answer 1

试试下面的方法。

我刚刚从 Div 中删除了 onmouseleave 并正确使用了 jquery 悬停事件。在悬停事件中，第一个函数是 mouseenter，第二个函数是 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>

jQuery 另一个 div 在悬停/鼠标离开时不闪烁

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

javascript

jquery

fadeout

fadein