Podpowiedź jQuery migocze, jeśli element wyzwalający div i docelowy element div pokrywają się - jquery, jquery-hover

Skonfigurowałem prosty dymek jQueryfunkcja, ale chodzi o to, gdy umieścisz kursor nad elementem wyzwalającym, działa, ale jeśli przesuniesz mysz nad docelowy element div, pozostając na przełączniku wyzwalacza (nakładania), migocze !? Jakieś pomysły?

Mam ten kod jQuery:

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

Dzięki tej strukturze HTML:

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

</div>

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

Odpowiedzi:

Możesz wyzwolić zdarzenie mouseenter i mouseleave dla elementu wyzwalającego div, gdy przesuniesz nad docelowym elementem div. To zatrzyma migotanie.

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

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

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

});