Hover over columns to change color? Options

[dougmanic]

Suppose you have a table, something like this:

CODE

<table>
     <tr>
         <td>Col 1</td><td>Col 2</td><td>Col 3</td>
     </tr>
     <tr>
         <td>Col 1</td><td>Col 2</td><td>Col 3</td>
     </tr>
</table>

Using Javascript or CSS, is there a way to change the background color of the whole first column (and not the row) whenever it is hovered upon?

I'm stumped on how to do this.

[Christian J]

This should change the currently hovered cell in the first column, but not the whole column, and it doesn't work in IE.:

CODE

td:first-child:hover
{
    color: #000;
    background: pink;
}

With javascript you might do something like (assuming the table's ID is "foo"):

CODE

window.onload=function()
{
    var foo=document.getElementById('foo');
    var tr=foo.getElementsByTagName('tr');

    for(var i=0; i<tr.length; i++)
    {
        var first_td=tr[i].getElementsByTagName('td')[0];
        first_td.onmouseover=function()
        {
            hover('on');
        }
        first_td.onmouseout=function()
        {
            hover('off');
        }
    }

    function hover(state)
    {
        for(var i=0; i<tr.length; i++)
        {
            var first_td=tr[i].getElementsByTagName('td')[0];
            if(state=='on')
            {
                first_td.style.color='#000';
                first_td.style.background='#fcc';
            }
            else if(state=='off')
            {
                first_td.style.color='#000';
                first_td.style.background='#fff';
            }
        }
    }

}