Hover effect table cells
Hover effect table cells
hi,
i am a beginner in jquery and now a have a question.
i have a table like this:
<table border="0">
<tbody>
<tr class="head">
<td class="text">Headline 1</td>
<td class="text">Headline 2</td>
<td class="text">Headline 3</td>
<td class="text">Headline 4</td>
</tr>
<tr class="raw_one">
<td class="text">Selection1</td>
<td class="pink">A 1</td>
<td class="orange">A 2</td>
<td class="grey">A 3</td>
</tr>
<tr class="raw_two">
<td class="text">Selection2</td>
<td class="pink">B 1</td>
<td class="orange">B 2</td>
<td class="grey">B 3</td>
</tr>
<tr class="raw_three">
<td class="text">Selection3</td>
<td class="pink">C 1</td>
<td class="orange">C 2</td>
<td class="grey">C 3</td>
</tr>
</tbody>
</table>
Now when i hover the cell with B2 i want that the class of the cell Selection2 and the cell Headline 3 changed.
My solution is that:
$('tr').hover(function(){
$(this).find('td.text').addClass('bold');
}, function(){
$(this).find('td').removeClass('bold');
});
but that works only for the first part but not with the headlines.
Can anybody help me?