JQuery mouseenter fire more than once on overlapping divs
<p>I am using JQuery mouseenter event to show a div inside another div. When the mouse enters DIV A I show a smaller DIV B inside it. The problem is that when I put my mouse over DIV B, JQuery runs the mouseenter event again. I want to show DIV B (inner one) and when the mouse goes over it, not to fire the mouseenter event again. Although technically, my mouse is still hovering DIV A. So on other words, Mouseout over DIV B causes JQuery to run mouseenter on DIV A again, that what I understand.</p>

<p><img src="http://i.stack.imgur.com/diq3g.png" alt="enter image description here"></p>

<p>Code:</p>

<pre><code>$(document).on("mouseenter", ".si", function (e) {
   settingsIcon(e,1);

});

$()

$(document).on("mouseout", ".si", function (e) {
    settingsIcon(e,0);

});

function settingsIcon(e, action) {

 if (action === 1) // show
{
    $(".settings_icon").remove();
    var id = parseInt(e.target.id.replace("dvci_", ""), 10); 
    $("#dvc_" + id).prepend("&lt;div class='settings_icon' &gt;&lt;img class='settings_icon_image' src='settings.png' style='width:59px; height:57px'  /&gt;&lt;/div&gt;");
    var icon = $("#dvc_" + id + " .settings_icon");

    icon.css({
        "left": ($("#dvci_" + id).width() / 2) - 30,
        "top": parseInt($("#dvci_" + id).css("margin-top").replace("px", ""), 10) + ($("#dvci_" + id).height() / 2) - 30
    });

    $(".settings_icon img").show("scale", {}, 400);

}
else {
    // hide
    $(".settings_icon").remove();
}
}
</code></pre>

<p><strong>jsfiddle</strong>: <a href="http://jsfiddle.net/tLUrd/" rel="nofollow">http://jsfiddle.net/tLUrd/</a></p>
