jQuery Hover мерцает, если триггер div и целевой div перекрываются

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

Вы можете инициировать событие mouseenter и mouseleave для триггера div при наведении на целевой div. Это остановит мерцание.

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

});