如果触发器div和目标div重叠，则jQuery Hover闪烁 [英] jQuery Hover flickers if trigger div and targeted div overlap

问题描述

我已经设置了一个非常简单的jQuery悬停功能，但是问题是，当您将鼠标悬停在触发器div上时，它可以工作，但是如果将鼠标移到目标div上而仍在触发器div上(重叠)，它将闪烁！有什么想法吗?

I have set up a very simple jQuery hover function, but the thing is when you hover over the trigger div, it works but if you move your mouse over the targeted div whilst still on the trigger div (the overlap) it flickers!? Any ideas?

我有这个jQuery代码:

I have this jQuery code:

            $("#tag").hover(
              function () {
                $("#homeHover").show();
              }, 
              function () {
                $("#homeHover").hide();
              }
            );

具有以下HTML结构:

With this HTML structure:

<div id="homeHover"></div>
<div id="tag">

</div>

这个CSS:

#homeHover {
width: 150px;
height: 150px;
position: absolute;
background: url("../img/arrow.png") no-repeat scroll 0 0 transparent;
top: 145px;
left: 0px;
display: none;
}
#tag {
float: left;
}

推荐答案

当您在目标div上移动时，可以触发触发器div的mouseenter和mouseleave事件.这将停止闪烁.

You can trigger a mouseenter and mouseleave event for the trigger div when you move over the targeted div. This will stop the flickering.

$("#homeHover").on({
    mouseenter: function(){
        // Trigger #tag hover to stop flickering
        $('#tag').mouseenter();
    }

    mouseleave: function(){
        // Trigger #tag mouseleave
        $('#tag').mouseleave();
    }
});

这篇关于如果触发器div和目标div重叠，则jQuery Hover闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！