Question

I’ve few tables like this in the same page:

<table>
<tr class="head">
    <th>
        Brand
    </th>
</tr>
<tr class="attributeVal">
    <td>
        text
    </td>
</tr>
<tr class="attributeVal">
    <td>
        text
    </td>
</tr>
....
</table>

And there is in page load

$('.attributeVal').hide();

The idea is when ‘head’ gets mouseover to show all the ‘attributeVal’ classes that is in the same table. I cat do $(‘.attributeVal’) because it effect all the ‘attributeVal’ that is on the page.

Also, Once I leave that table all the ‘attributeVal’ in the current table will hide().

Thanks.

Answer 1

This method shows the rows on mouseover, and hides them when hovering away. Replace .toggle() with .show() if you want to keep the rows visible.

$('table').mouseleave(function() {
    $(this).find('.attributeVal').hide();
});
$('.head').mouseover(function() {
    $(this).nextAll('.attributeVal').show();
});

Using mouseleave and mouseover.
Demo: http://jsfiddle.net/t7CWp/ (also works with jQuery 1.5.1).