[jQuery] Hover Effect on 2 rows
hi,
i'm using JQuery to add a Class when a row is hovered over - i have it
working, however, each row of data has 2 rows in the table - I want to
have both rows change background color whenever i hover over either of
them. The table already has 'stripes' for alternating records and
readability.
I'm using function:
=================
$(function(){
$('.Row').hover(function(){
$(this).addClass('hover');
},
function(){
$(this).removeClass('hover');
})
$('.AltRow').hover(function(){
$(this).addClass('hover');
},
function(){
$(this).removeClass('hover');
})
=================
the table structure looks like this:
<table class="Grid" cellspacing="0" cellpadding="0">
<tr class="Caption">
<th>Comment</th>
<th>Created</th>
</tr>
<tr class="Row">
<td> </td>
<td> </td>
</tr>
<tr class="Row">
<td> </td>
<td> </td>
</tr>
<!-- -->
<tr class="AltRow">
<td> </td>
<td> </td>
</tr>
<tr class="AltRow">
<td> </td>
<td> </td>
</tr>
</table>
==================
the individual rows highlight using STYLE of ' tr.hover td
{background:yellow;} '
how do get the 2 TR's to highlight together at the same time when i
float over the class 'Row' ? Do i surround them with DIVs or SPAN?
Is this possible to group 2 table rows inside another element and get
the function to fire for both.
thanks in advance for any help