jQuery hover effect over table

Question

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 1

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.