jquery去除闪烁

Question

block 在 .hover() 上闪烁

这是一个完整示例 - http://jsfiddle.net/xBEjQ/

如何解决这个问题？

UPD:弹出窗口应在鼠标离开较小的 block 后删除(.image)，而不是.popup block 。

Answer 1

更新的问题:由于鼠标事件不会发生在较小的元素上(它完全重叠)，因此您必须使用第三个​​ <div>像这样:

<div class="block">
    <div class="popup"></div>
    <div class="popup upper"></div>
    <div class="image"></div>
</div>

并添加此 CSS(注意 z-index 比其他 .popup 更高):

.upper { width: 100px; height: 100px; z-index: 41; }

和匹配的脚本:

$(".block .image").mouseenter(function(){
    console.log($(this).siblings(".popup").length);
  $(this).siblings(".popup").show();
});
$(".block .upper").mouseleave(function(){
  $(this).siblings(".popup").andSelf().hide();
});

You can test it out here .

<小时/>

对于上一个问题:由于弹出窗口位于元素顶部，因此使用 mouseenter 扣动扳机， mouseleave 在弹出窗口上，如下所示:

$(".block .image").mouseenter(function(){
  $(this).siblings(".popup").show();
});
$(".block .popup").mouseleave(function(){
  $(this).hide();
});

You can test it here .