Sjmon Sjmon - 1 month ago 13
jQuery Question

jQuery hover effect over table

I am new to jQuery and I am trying to make a hover effect on my table but I don't know how.
I would like to make only the text red and then how to remove the red color again when the focus has been lost.

This is what I have so far:

<script type="text/javascript">
$(function() {
$('tr').hover(function() {
$(this).css('color', 'red')
});
});
</script>


<table border="1">
<tr>
<th>ID</th>
<th>name</th>
</tr>
<tr>
<td>#1</td>
<td>ole</td>
</tr>
<tr>
<td>#2</td>
<td>jeffrey</td>
</tr>
<tr>
<td>#3</td>
<td>collin</td>
</tr>
<tr>
<td>#4</td>
<td>eve</td>
</tr>
</table>

Answer

All you need to do is pass another function to hover for the mouse leave.

$('tr').hover(function() {
    $(this).css('color', 'red');
}, function() {
    $(this).css('color', '');
});

See example on jsfiddle.

Or you could do it only in css as well.

tr:hover{
    color:red;
}

IE 5/6 supports both only on links. IE 7 supports :hover, but not :active, on all elements. from here.

Comments