[英]jQuery fadein and fadeout another div on hover / mouseleave without blinking
I got this HTML: 我得到了这个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: 而这个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. 因此,当快速将鼠标悬停并离开多次时,
fotoedit
出现在cropit-image-preview-container
上方的悬停上,而在mouseleave上消失而不会产生“闪烁”效果。 It works perfect in firefox but not in chrome. 它在Firefox中非常有效,但在chrome中则不能。 What would be the proper way to do it?
正确的做法是什么?
Try the following. 尝试以下方法。
I just deleted onmouseleave from Div and used jquery hover event properly. 我刚刚从Div删除onmouseleave并正确使用了jquery悬停事件。 In hover event, 1st function is mouseenter and 2nd function is mouseleave.
在悬停事件中,第一个功能是mouseenter,第二个功能是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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.