change table column and row style on hover

Question

I'm trying to write the script to change the style of a table column and row on hover. This script works when I have one table in the page, but does not work for others. I know that I need to grab all tables with .price_table class but I'm new in jQuery, Pleas help me

$(function() {           
$(".price_table").delegate('td','mouseover mouseleave', function(e) {
    if (e.type == 'mouseover') {
      $(this).parent().addClass("hover");
      $("colgroup").eq($(this).index()).addClass("hover");
    } else {
      $(this).parent().removeClass("hover");
      $("colgroup").eq($(this).index()).removeClass("hover");
    }
}); }); 

i cant put my table hear the system says "Your post appears to contain code that is not properly formatted", but it is a simple table, he only difference is that it contains <colgroup></colgroup> tags as many as columns in the table

Answer 1

The problem you have is not in CSS but in your HTML, you can see in screenshot bellow that the colgroup s in table aren't defined correctely: