Evaluate please my js code reliability
<p>I have 2 div tags </p>

<pre><code>&lt;div id="div_1" style="width: 100px; height: 100px; background-color: #090"&gt;&lt;/div&gt;
&lt;div id="div_2" style="width: 100px; height: 100px; background-color: #900"&gt;&lt;/div&gt;
</code></pre>

<p>What I want: on mouse out on <code>div_1</code>,  remove <code>div_2</code>.</p>

<p>But if after <code>div_1</code> onmouseout, mouse cursor is over on  <code>div_2</code>, dont remove <code>div_2</code>. this is js code for this:</p>

<pre><code>             $("#div_1").on("mouseout", function () {
                 $("#div_2").css({
                    display: "none"
                 });
             });


              $("#div_2").on("mouseover", function () {
                 $("#div_2").css({
                    display: "block"
                 });
             });
</code></pre>

<p>demo <a href="http://jsfiddle.net/Muj3d/" rel="nofollow">http://jsfiddle.net/Muj3d/</a></p>

<p>this works good, but I have this question: theoretically how much is this reliable? I ask this because, action <code>div_1 mouseout</code> must be happened before than <code>div_2 mouseover</code> right? </p>
