Help with hover jquery
<p>The below code hides <code>.titlerow</code> on hover of <code>.row</code>.  How do I change the code so if the mouse isn't hovered on any row then the first <code>.titlerow</code> is hidden? </p>

<pre><code>echo "&lt;div class='row'&gt;&lt;div class='titlerow'&gt;&lt;/div&gt;&lt;/div&gt;
&lt;div class='row'&gt;&lt;div class='titlerow'&gt;&lt;/div&gt;&lt;/div&gt;
&lt;div class='row'&gt;&lt;div class='titlerow'&gt;&lt;/div&gt;&lt;/div&gt;
&lt;div class='row'&gt;&lt;div class='titlerow'&gt;&lt;/div&gt;&lt;/div&gt;";

$(function() {

    $('.row').hover(function() {

    $(this).find('.titlerow').hide();
    }, function() {
        $(this).find('.titlerow').show();
    });
});
</code></pre>
