jQuery hover effect over table
11,102
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.
Author by
Sjmon
Updated on June 05, 2022Comments
-
Sjmon almost 2 years
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>