jQuery Table Row Mouseover issue

Question

I have the following code:

$('table tr:not(:first)').mouseover(function() {
  $(this).removeClass('hovered_error');
    $(this).addClass('hovered');
  }).mouseout(function() {
  $(this).removeClass('hovered');
});

The above works a treat in ensuring that the first row of a table is excluded from the 'mouseover'and 'mouseout' functions.

However, the issue is I have multiple tables on the page and whilst the first table row is ignored the rest aren't.

I'm not sure how to adapt the above to account for multiple tables - is it possible?

Answer 1

use

$('table tr:not(:first-child)').mouseover(function () {
    $(this).addClass('hovered');
}).mouseout(function () {
    $(this).removeClass('hovered');
});

Demo: Fiddle