Question

The below code hides .titlerow on hover of .row. How do I change the code so if the mouse isn’t hovered on any row then the first .titlerow is hidden?

echo "<div class='row'><div class='titlerow'></div></div>
<div class='row'><div class='titlerow'></div></div>
<div class='row'><div class='titlerow'></div></div>
<div class='row'><div class='titlerow'></div></div>";

$(function() {

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

    $(this).find('.titlerow').hide();
    }, function() {
        $(this).find('.titlerow').show();
    });
});

Answer 1

i hope this is what you mean, if not please elaborate on what your intensions are…

html:

<div class='row'><div class='titlerow'></div></div>
<div class='row'><div class='titlerow'></div></div>
<div class='row'><div class='titlerow'></div></div>
<div class='row'><div class='titlerow'></div></div>

script:

$(function() {
    $('.row').hover(function() {
        $('.titlerow').first().show();
        $(this).find('.titlerow').hide();

    }, function() {
      $(this).find('.titlerow').show();
      $('.titlerow').first().hide();
    });

    // hide the first titlerow
    $('.titlerow').first().hide();
});

edit

in the code above i made some fixes for your new request. + a working example can be found below

working example:
http://jsfiddle.net/muqxj/