jquery去除闪烁

Question

块在 .hover() 上闪烁

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

如何解决这个问题？

UPD：弹出窗口应该在鼠标离开较小的块后被删除 /em> (.image)，而不是 .popup 块。

Answer 1

对于更新的问题：由于鼠标事件不会发生在较小的元素上（它完全重叠），因此您必须使用第三个​​

; 像这样：

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

并添加此 CSS（注意比其他 .popup 更高的 z-index）：

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

您可以在此处测试。

Answer 2

更新了您的 jsfiddle： http://jsfiddle.net/xBEjQ/6/

HTML

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

<强>jQuery

$(".block .image").mouseover(function(){
    $(this).parent().find(".popup").show();
});

$(".block .popup").mouseout(function() {
    $(this).hide();
});

<强>CSS

.block { position: relative; width: 400px; height: 400px; background: #ccc; }
.popup { display: none;
    position: absolute; left: 0; top: 0; width: 200px; height: 200px; background: #eee; z-index: 40; }
.image { position: relative; width: 100px; height: 100px; background: #aaa; z-index: 30;

Answer 3

鼠标悬停时显示弹出窗口
隐藏弹出窗口鼠标移出时的弹出窗口

http://jsfiddle.net/generalhenry/WkH6q /

Answer 4

$(".block .image").mouseover(
    function(){
        $(this).parent().find(".popup").show();
    }
);
$(".block .popup").mouseout(
    function(){
        $(this).hide();
    }
);

这仅适用于“图像”上方有“弹出窗口”的情况。它闪烁的原因是，一旦“弹出窗口”显示，它就会触发“图像”上的“鼠标悬停”，从而隐藏“弹出窗口”，

只要“弹出窗口”不位于顶部，您的代码就可以正常工作的“图像”。