如果触发 div 和目标 div 重叠，jQuery Hover 会闪烁

Question

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

我有这个 jQuery 代码：

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

使用这种 HTML 结构：

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

Answer 1

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

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

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

Answer 2

$(document).mouseover(function(e) {
    if (e.target == $("#homeHover").get(0) || e.target == $("#tag").get(0)) {
        $("#homeHover").show();
    }
    else {
        $("#homeHover").hide();
    }

});