jquery删除闪烁

Question

块闪烁 .hover()

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

如何解决这个问题？

UPD:鼠标离开较小的块(.image)后,应该删除弹出窗口,而不是.popup阻止.

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();
});

你可以在这里测试一下.

对于上一个问题:由于弹出窗口位于元素顶部,因此在弹出窗口中使用mouseenter触发器mouseleave,如下所示:

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

你可以在这里测试一下.