jQuery hides everything although I tell it to show
<p>Kind of hard to explain this problem in the title...</p>

<p>I would like to show the <code>.rowOptions</code> of the row entered by the mouse, but also hide all other instances of <code>.rowOptions</code>. </p>

<p>I have the following code, but it hides all elements. It seems like it executes the <code>show()</code> line before the <code>hide()</code> line. </p>

<p>How can I solve this?</p>

<pre><code>$(".container_12").live('mouseenter', function() { 

    $(".rowOptions").hide(); 
    $(this).children(".rowOptions").show();

});
</code></pre>

<p>The markup is:</p>

<pre><code>&lt;div class="container_12"&gt;
    &lt;div /&gt;
    &lt;div /&gt;
    &lt;div /&gt;
    &lt;div class="rowOptions" style="display: none"; /&gt;
&lt;/div&gt;
</code></pre>
