jquery删除闪烁答案

【问题标题】：jquery remove blinkingjquery删除闪烁
【发布时间】：2010-11-05 22:47:35
【问题描述】：

块在.hover()上闪烁

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

如何解决这个问题？

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

【问题讨论】：

您无法在鼠标移出较小的块时执行此操作，因为您在它上方的图层上......不是没有您现在正在闪烁的。

标签： jquery hover blink

【解决方案1】：

对于更新的问题：由于鼠标事件不会发生在那个较小的元素上（它完全重叠），你必须使用 第三个 <div> like这个：

<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.

【讨论】：

@Happy - 你想要的在那里是不可能的，因为你不会在完全重叠的元素上获得任何鼠标事件。您要么需要在弹出窗口上方第三个相同大小的透明 div（混乱），要么在弹出窗口上使用 mouseleave，我在上面有。
你能举个透明div的例子吗？似乎是一个解决方案
@Happy - 我刚刚更新了一个演示如何做到这一点，看看:)

【解决方案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;

【讨论】：

在这种情况下使用mouseenter 和mouseleave（就像.hover() 一样），因为mouseover 和mouseout 在进入儿童时也会触发。例如，如果弹出窗口中有任何元素（可能会有），当鼠标移到其中任何一个上时，它就会隐藏。
@Nick Craver 感谢您为我解释这一点。我总是喜欢阅读你的答案。我想知道为什么同时有mouseout和mouseenter。我会把这个答案留给其他可能还不知道的人。 :D

【解决方案3】：

在鼠标悬停时显示弹出窗口 弹出框

在鼠标移出时隐藏弹出框

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

【讨论】：

再次不要在这里使用mouseout，请参阅我对@tinifni 答案的评论

【解决方案4】：

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

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

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

【讨论】：