Cross hover in table

Uses a bit of css with not so much js

HTML

Hover on top of the table...
<table>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
	<thead>
	    <tr>
	        <th></th>
	        <th></th>
	        <th></th>
	        <th></th>
	        <th></th>
	    </tr>
	</thead>
	<tbody>
    		<tr>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    		</tr>
    		<tr>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    		</tr>
    		<tr>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    		</tr>
            <tr>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    		</tr>
            <tr>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    		</tr>
            <tr>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    		</tr>
            <tr>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    		</tr>
            <tr>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    		</tr>
    	</tbody>
</table>

CSS

.hover { background-color: lightGrey; }

td{
    border: 1px solid lightGrey;
    padding:0;
}

td{height:25px; width:100px;}

JavaScript

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