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

});

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

2 个答案: